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CHAPTER 


Overview of bada 

Samsung bada is a smartphone platform that powers millions of hand- 
sets globally, bada means 'ocean' and refers to the open possibilities of 
the ocean. 
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CHAPTER 


bada SDK Installation 

Here you'll read about all the to-dos in order to get started with the 
bada SDK 
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CHAPTER 


Application Development Process 

Once you've installed the SDK and IDE, you are all set to develop on 
bada. Let's look at the steps involved in making your idea a reality 


Designing and Creating 
the Application UI 

CHAPTER Your application's interface is critical. Here are points for you to 
remember while working on the UI. 
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Coding Applications 

Best practices while coding your bada applications... 

CHAPTER 

HelloWorld 

Hello World is a term all developers are familiar with. Here you'll find 
the standard procedure in building your first app 


HelloFlashApp 

All you need to know so you could create a Flash application for your 
CHAPTER bada device 

Web Programming for bada 

bada offers your flexibility in developing web applications 

CHAPTER 

OpenGL ES 2.0 on bada 

bada has added support for OpenGL graphics support with version 2.0 

CHAPTER 
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INTRODUCTION 


INTRODUCTION 

T his Fast Track will help you get started with bada and provides 
all the information you need to set up the development environ- 
ment and get familiar with the application development process 
and developer tools. 

First we introduce the bada platform in terms of its architecture and 
C++ and web frameworks. Next, we look at the prerequisites for using 
the bada SDK (software development kit), and contains the installation 
instructions for the SDK. 

After that we explain how to use the bada SDK and various bada 
IDE (integrated development environment) tools when developing 
bada applications. We also take a deeper look into the application 
development process for managing your application’s lifecycle from 
product conception, through development and release, to end-of-life 
application retirement. 

Next we have detailed information on general bada SDK features, 
such as application UI design concepts and application migration 
between API releases. There are also guides to get started with C++, 

Flash and web based programming for bada. We end with a guide on 
using OPENGL ES 2.0 on bada 2. □ 
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OVERVIEW 
OF BADA 


Samsung bada is a smartphone 
platform that powers millions of 
handsets globally, bada means ‘ocean’ 
and refers to open possibilities. 

S amsung bada is a user-interactive and service-oriented smartphone 
platform that allows you to create feature -rich applications for 
bada devices using C++, Flash, and web programming. The bada 
platform allows you to create a wide range of applications: 

bada architecture 

The bada architecture consists of the following four layers: 

Kernel 

As is the case with an mobile operatin system, the bada kernel contains 
either the real-time operating system or the Linux kernel. 

Device 

This layer contains the core functions of the mobile device platform that 
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Device Service Web and Flash 

Applications Applications Applications 


bada 


Framework 

C++ and Web frameworks Efral cengisi of an application 
framework and June lions exported by underling : avers 


Service 

Senrice^onented functions (hai are provided by application engines 
and server-assisted components. 


Device 

Core functions of a device platform that are provided by system, 
security graphics, multimedia, and communicalion components 


Kernel 

OS kernel 


Architecture of bada 


are provided by the device operating system, graphics and multimedia 
functionality, and communication components. These functions include, 
telephony, security, graphics, and event and window management. 

Service 

This layer contains the service-oriented functions that are provided by appli- 
cation engines and server-assisted components. The application engines 
provided by the service layer include Contact and Messaging engines. The 
server-assisted features are provided by RESTful web-service components 
that interconnect with the service components of the bada Server. The service 
layer enables applications to manage data that is stored on remote servers, 
such as geographic information and user presence information. Access to 
the server-assisted features is possible through APIs (application program 
interfaces) on the Framework layer. 





OVERVIEW OF BADA 


7 


Framework 

This layer contains C++ and web frameworks of bada. The C++ framework 
consists of the application framework, interfaces and classes that pro- 
vide access to the functionality on the underlying layers. The application 
framework provides features for application life-cycle management, event 
handling, and application controls. The interfaces provided by the open 
API framework include several basic interfaces that are needed by all 
applications for handling data types, utilities, basic device features, and 
application states, and for creating the user interface. The web framework 
provides well-established standards and features, such as WAC 2.0, HTML5, 
CSS, and JavaScript, as well as JavaScript-based cross-platform APIs for 
UI controls and events. 

Application model 

The bada platform supports the following application types: 

Base applications 

These are stored in the ROM and cannot be For detailed 


bada applications 

You can install and remove bada applications from your device as per your 
convenience. These could be C++ or Flash applications created using the 
C++ framework, or a web application created with the web framework. 

Users access bada applications through the device’s main menu or task 
manager. The main menu displays the base and bada applications installed 
on the device, while the task manager displays the icons of the application 
history for both currently running and inadvertently terminated applica- 
tions to provide the user quick access to them. 


The bada platform now supports multitasking with versions 2.0. However, 
when multiple bada applications are running simultaneously, only one 
application can run in the foreground, while the remaining applications 
continue to run in the background. However, the user can switch the applica- 
tion perspectives and determine which application runs in the foreground. 


removed using the Application Manager. 
Examples of base applications include dialer, 
contact, camera, and music player. 


technical 
information, visit 

- developer.bada.com 



Multitasking in bada 
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OVERVIEW OF BADA 


To view all the applications running, you can use the task manager, which 
lists all running applications, execution and launch history. You can ter- 
minate individual applications by long pressing the Menu button and then 
tapping on the end symbol over individual apps. 

Application lifecycle 

The following figure illustrates the basic lifecycle of a bada application, 
including launching and terminating an application and perspective shifts 
between background and foreground. □ 
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Basic Lifecycle of a bada application 





BADA SDK 
INSTALLATION 

Here you’ll read about all the to-dos in 
order to get started with the bada SDK 


Before you can get started with developing bada applications, you need 
to install the bada SDK (software development kit). Before installing 
the SDK, make sure that your computer fulfills the defined system and 
software requirements. 

Prerequisites 

To develop in bada, you need: 

PC (with the bada SDK installed), with the following system require- 
ments: 

• Microsoft Windows® XP 32-bit, Windows® Vista 32-bit, or Windows® 
7 32- or 64-bit operating system 

• At least dual-core 1.8 GHz of CPU 

• At least 2 GB of RAM memory 

• At least 2.2 GB of free disk space 

• Local administrator authority 

• Screen resolution of the system must be greater than the resolution 
of the Emulator. 
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BADA SDK INSTALLATION 


• OpenGL® 1.5 supported graphics hardware for OpenGL® ES 1.1, and 
OpenGL® 2.1 supported graphics hardware for OpenGL® ES 2.0, with 
the latest version of the graphics card driver. 

► A bada membership, for downloading the SDK from the bada developer 
site and managing your application’s life-cycle. 

► Target mobile device for testing your application after first testing it 
with the Emulator in the IDE. 

► To deploy your application to a mobile device, you need to create a con- 
nection between your computer and mobile device via USB. 

Installing the bada SDK 

To install the SDK (software development kit) on your computer: 

1. Download the SDK installer, bada_SDK_< versiom.exe, from http://devel- 
oper.bada.com/ 

2. Run the SDK installer. 

3. Select the required platform binary, and click Next. 

4. Click Install. 

5. The SDK set-up wizard informs you when the installation is complete. 
If the download fails due to a firewall or unstable network connections, 

you can download the desired components from the bada developer site into 
the directory where the SDK installer is located, and run the SDK installer 
again. To add more components to your SDK later on: 

1. Run the SDK installer. 

2. In the Program Maintenance window, select Modify and click Next. 

3. In the Choose Components window, select the required components and 
click Next. 

4. When the installation is complete, click Finish. 

Starting the bada IDE 

The bada IDE (integrated development environment) is part of the SDK 
and installed with it. When you start the IDE, you are prompted to define 
the path for the IDE workspace. The default location is in the folder where 
the IDE is installed. If you start with a new version of the IDE, do not use 
a workspace created for a previous IDE version. 

Go to Start > bada IDE. When you start the IDE for the first time, it 
displays a welcome page with more information on bada and on developing 
with the IDE. On the welcome page, click the Workbench icon to go to the 
development view. 
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bada IDE 

The bada IDE is an integrated development environment that provides a set of 
development tools, such as C++ editor, compiler, debugger, Application Wizard 
(for creating application projects), UI Builder (for designing the application 
UI), Potential Bug Checker (for tracing bugs in source code), API and Privilege 
Checker (for checking API and privilege usage violations), Memory Usage 
Checker (for monitoring the memory usage of an application), Profiler (for opti- 
mising application code), JavaScript Debugger (for debugging Web applications), 
Testing Tool (for unit testing), and UI Sequencer (for testing the application UI). 

The bada IDE is based on the Eclipse CDT (C/C++ Development Tools) 
and JSDT (JavaScript Development Tools). Eclipse provides a set of code 
editing tools in its text editor. These tools support CDT features, such as 
syntax highlighting, code folding, tabbed documents, and content assistance 
(context-sensitive code completion). 

The IDE UI consists of various views, which can be opened from Window 
> Show View or Window > Show View > Other > bada. The most 
important bada-specific views are: 

Output: Shows the log, debug, and exception messages. 

Resource Explorer: Shows the resources included in a project. It also 
allows you to easily add forms to your project. 

Profile: Shows a summary of the methods called during an application’s 
execution, such as call count and execution time. 

Problems: Shows build errors or warnings, and the results of the Memory 
Usage Checker and API and Privilege Checker tools. 

Some views are visible in specific perspectives only. To switch per- 
spectives, go to Window > Open Perspective > Other and select the 
required perspective. 

Installing Plug-ins for the bada IDE 

To install new plug-ins for the bada IDE: 

1. In the bada IDE, select Help > Install New Software. 

2. From the Work with drop-down list, select http://static.hada.com/feature- 
update/ as the software site. 

3. Select the plug-ins to install and click Next to continue and complete the 
installation process. 

Updating the bada IDE 

To check for bada IDE updates and install them through the IDE: 
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1. Exit the bada IDE. 

2. If you have already installed JRE or JDK, remove the \<BADA_SDK_ 
HOME>\IDE\jre directory 

3. In case you haven’t installed JRE or JDK, move the jre direc- 
tory from \<BADA_SDK_HOME>\IDE to \<BADA _ SDK _ HOMEX 
Add \<BADA_SDK_HOME>\jre\bin to the PATH environment variable. 

4. Start the bada IDE. 

5. In the bada IDE menu, go to Help > Check for Updates. 

6. If an update for the bada IDE is found, select it and click Next to continue 
and complete the installation process. 

7. If you’ve moved the jre directory from \<BADA_SDK_HOME>\ 
IDE to \<BADA_SDK_HOME> before installing the updates, move it 
back to \<BADA_SDK_HOME>\IDE and remove \<BADA _ SDK _ HOME>\ 
j re\bin from the PATH environment variable. 

Emulator 

The Emulator emulates a target device running bada applications. It enables 

you to use target device-optimized environment to debug and test your 
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Working on the bada IDE 


application on your local machine before deploying it to the real target 
device. The Emulator uses native debuggers that enable you to control your 
application’s execution. 

The Emulator supports the emulation of the real device functionality, 
including multi-point touch, codecs, camera, and OpenGL® ES. 
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The following figure illustrates the Emulator control keys, and the 

Emulator menu which lets you easily control the Emulator environment. 
To access the menu options, right-click on the Emulator and select: 

► Event Injector: Provide artificial data and sensor readings for 
your application. 

► Rotate: Switch between portrait and landscape modes, if the application 
supports rotation. The mode is set to Portrait by default. 

► Error Lookup: Retrieve a system error message based on the 
entered value. 

► Update Content DB: Register newly added data files (images, sounds, 
videos, or other media data) in the media directory, which emulates the 
mass storage mode, or in the MMC directory, which emulates multimedia 
card storage (this option works only on the idle screen). 

► Save to File: Save the screenshot of the Emulator screen as an image file. 
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► Copy to Clipboard: Copy the screenshot of the Emulator screen to 
the clipboard. 

► Option: Adjust the Emulator size with the Size option. The default 
size- scale of the Emulator is 0.5. Set the Emulator to remain on the top 
of other desktop windows with the Always on Top option. 

► Close: Exit the Emulator. 

If your application accesses media files in the device’s Media directory, 
you must manually copy the media files to the Emulator’s Media directory 
before running the application on the Emulator. The Emulator’s Media direc- 
tory is located in \<BADA_SDK_HOME>\Model\<Device_model>\Emulator\ 
FS\Media. 


For detailed 

technical 
information, visit 

developer.bada.com 


Ul builder 

bada provides a UI Builder to design and 
create the application UI. UI Builder is a 
WYSIWYG (What You See Is What You Get) 
design environment for creating user interfaces 
(UI) for applications. 

With UI Builder, you can create forms and all the user interface elements, 
that is, containers and controls, that you want the forms to contain. UI Builder 
stores the created forms as XML files into the project folder in the IDE. 

You can also use UI Builder to create other kinds of application UI 
elements as separate resource files. Panels, pop-ups, and localised string 
resources can have their own resource XML files. 

UI Builder has a dedicated toolbar in the IDE that provides additional 
time-saving design tools such as zoom, editing mode (set display to portrait 
or landscape), and align controls. 
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APPLICATION 

DEVELOPMENT 

PROCESS 

Once youVe installed the SDK and IDE, 
you are all set to develop on bada. Let’s 
look at the steps involved in making 
your idea a reality. 

S amsung bada provides the tools required to manage your applica- 
tion’s lifecycle from product conception, through development 
a „ are ,«as, toe „ d -oMi fcwplM o„ re , irem e„, 

Application profile 

You must define the application profile before you can start to develop your 
application’s functionality. 

The application profile ensures that you have full access to the services 
provided by bada by defining the following basic information: 

1. Name and version of the application 

2. API version used in the application 

3. Privilege groups assigned to the application 
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bada Application Development process 


Your bada developer profile 

1. Start the profile creation wizard on the bada developer site by selecting My 
Applications > Application Manager, and on the displayed screen, 
clickGenerate a New Application Profile. 

2. In the Set your application name field, define the application name, and 
fill the Describe your application field. 

3. The name of your application must be 4-20 characters long. 

4. Click Next. 

In the Set your application version field, assign a version number for 
the application. 

The application version number is set to 1.0.0 by default. You can revise 
the application version number as your application matures and is upgraded. 
The supported range of application version numbers vary from 0.0.1 to 
35.35.1295. 

5. In the Select your bada API version field, select the appropriate version. 
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6. If you select the API version as 2.0, you also need to select the application 
type that you want to develop. 

7. Click Generate. 

Based on the name and version type information, the bada developer site 
generates a unique ID. The application ID is needed for basic configuration 
settings and application life-cycle management. 

8. Click Continue. 

9. Assign privilege groups, as needed, and click Finish. 

10. Some of the bada APIs are so called privileged APIs that handle platform 
and user- sensitive data. To be able to use features and services provided 
by privileged APIs in your application, you must assign specific privilege 
groups to your application, based on the kind of application functionality 
that you want to develop. 

After you have created the application profile and downloaded the 
manifest file, you’re ready to create the application project. 

Manifest file 

All bada applications need to have a manifest file (manifest.xml). After 
creating the application profile, you can download the manifest file from 
the bada developer site to be used in your application project. 

You don’t need to create or edit the manifest file manually. The down- 
loaded manifest file contains the relevant application information that you 
have defined in the application profile or that has been generated based on 
the profile, such as: 

► Application ID 

► Application type 

► Assigned privilege groups 

► API version 

Creating the application project 

After you’ve defined your application profile on the bada developer site and 
downloaded the manifest file, you are ready to create the application project 
in the bada IDE. The application project creation steps differ based on 
whether you are creating a C++, flash, or web application. 

Creating a C++ application project 

The following instructions are specific for creating the project with the bada 
Form Based Application template. 


tfi/rifcdigit™ 
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To create the C++ application project: 

1. In the IDE, select File > New > bada C++/Flash Application Project. 
If the project option you want is not visible, make sure that you are using 

the correct perspective (bada C++). To switch perspectives, go to Window > 
Open Perspective > Other and select the perspective you need. 

2. In the New bada C++/Flash Application Project window, define the project 
details such as the name of your project, location for your application 
project or use the default location. Select the project type as bada Form 
Based Application, and click Next. 

3. Select the Default manifest file check box to use the default device con- 
figuration, or browse for the location where you have stored the manifest 
file that you downloaded from the bada developer site, and click Next. 
For the purpose of getting familiar with the IDE and SDK, you can also 

create an application without registering it on the bada developer site. In 
this case, you need to use the default manifest file provided by the SDK. 
An application that is developed using the default manifest file cannot 
connect to the bada Server and cannot be signed or sold in Samsung 
Apps Seller Office. 

4. Make sure that the path for bada SDK root matches with the location 
where you have installed the SDK and that the Model for developing 
your application is correct, and click Next. 

The SDK root path points to the latest installed SDK instance by default. 
Check that the name of the project is correct, and click Next. 

You can also add vendor information and a project description. 

5. Define a name and base class for the form, and click Next. 

6. If you want your application to support target devices with different 
display resolutions, select the Auto-scaling check box, and click Next. 

7. If you want other applications to have read and write access to the / 
Home/Share2 folder of your application, add their application IDs and 
click Next. 

Defining trusted applications enables you to share your application files 
with other applications. 

8. Your application can define whether notifications are displayed as tickers 
or full messages, and whether an alert sound and badge are used with 
notifications. Select the options you need from the Notification list. 

9. If you want to export the functionality of another application for your 
application, specify the provider ID, operation ID, and AppControl 
category, and click Next. 
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10. If you want your application to launch automatically with specific condi- 
tions, specify the launch conditions, and click Next. 

11. Select the build configurations based on where the application is to be 
deployed, and click Next. 

12. Check that the project summary is correct, and click Finish. 

The new application project is shown in the Project Explorer view of the 
IDE, with default content in the application.xml file as well as in several 
project folders. The selected manifest file is also included in the project. 

Creating a Flash application project 

The following instructions are specific for creating the project with the bada 
Flash Based Application template. To create the flash application project: 

1. In the IDE, select File > New > bada C++/Flash Application Project. 
If the project option you want is not visible, make sure that you are using 

the correct perspective (bada C++). To switch perspectives, go to Window > 
Open Perspective > Other and select the perspective you need. 

2. In the New bada C++/Flash Application Project window, define the project 
details as you would do according to the procedure for C++ application 
projects. Select the project type as bada Flash-based Application, and 
click Next. 

3. Select the Default manifest file check box to use the default device con- 
figuration, or browse for the location where you have stored the manifest 
file that you downloaded from the bada developer site, and click Next. 
For the purpose of getting familiar with the IDE and SDK, you can also 

create an application without registering it on the bada developer site. In 
this case, you need to use the default manifest file provided by the SDK. An 
application that is developed using the default manifest file cannot connect to 
the bada Server and cannot be signed or sold in Samsung Apps Seller Office. 

4. Make sure that the path for bada SDK root matches with the location 
where you’ve installed the SDK and that the Model for developing your 
application is correct, and click Next. The SDK root path points to the 
latest installed SDK instance by default. 

5. Check that the name of the project is correct, and click Next. You can 
also add vendor information and a project description. 

6. Define a name, base class for the form, and the source Flash file, and 
click Next. 

You must also browse and select the source Flash file. After you define 
the source Flash file, the related resource files (such as sound and images) 
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mentioned within the source file are shown in the field below Select the 
files you need. The SWF source Flash file and the selected related files are 
automatically copied to your application project’s / Res folder. 

Be aware that the resource files stored in the read-only /Res folder 
cannot be modified. If the application needs to modify any resource files, 
they must be stored in the /Home folder, and the local file path of the Flash 
control, passed as a parameter in the Flash: : Construct () method, must 
be updated to reflect the change in the resource file location. 

7. If you want your application to support target devices with different 
display resolutions, select the Auto-scaling check box, and click Next. 
Auto-scaling enables your application UI to automatically scale 

up or down to match the target device resolution. If you enable auto- 
scaling, make sure that you select an appropriate base resolution for 
your application. 

8. If you want other applications to have read and write access to the / 
Home/Share2 folder of your application, add their application IDs and 
click Next. 

9. Defining trusted applications enables you to share your application files 
with other applications. 

Your application can define whether notifications are displayed as tickers 
or full messages, and whether an alert sound and badge are used with noti- 
fications. Select the options you need from the Notification list. 

10. If you want to export the functionality of another application for your 
application, specify the provider ID, operation ID, and AppControl 
category, and click Next. 

11. If you want your application to launch automatically with specific condi- 
tions, specify the launch conditions, and click Next. 

12. Select the build configurations based on where the application is to be 
deployed, and click Next. 

13. Check that the project summary is correct, and click Finish. 

The new application project is shown in the Project Explorer view of the 
IDE, with default content in the application.xml file as well as in several 
project folders. The selected manifest file is also included in the project. 

Creating a web application project 

The following instructions are specific for creating the project with the bada 
Web Application template: 

1. In the IDE, select File > New > bada Web Application Project 




APPLICATION DEVELOPMENT PROCESS 


21 


If the project option you want is not visible, make sure that you are 
using the correct perspective (bacla JavaScript or bada C++). To switch 
perspectives, go to Window > Open Perspective > Other and select 
the perspective you need. 

2. In the New bada Web Application Project window, define the project 
details as you did above. 

For the purpose of getting familiar with the IDE and SDK, you can also 
create an application without registering it on the bada developer site. In 
this case, you need to use the default manifest file provided by the SDK. An 
application that is developed using the default manifest file cannot connect to 
the bada Server and cannot be signed or sold in Samsung Apps Seller Office. 

3. Make sure that the path for bada SDK root matches with the location 
where you have installed the SDK and that the Model for developing your 
application is correct, and click Next. The SDK root path points to the latest 
installed SDK instance by default. 

4. Check that the name of the project is correct, and click Next. 

You can also add vendor information and a project description. 

5. If you want to export the functionality of another application for your 
application, specify the provider ID, operation ID, and AppControl 
category, and click Next. 

6. Check that the project summary is correct, and click Finish. 

The new application project is shown in the Project Explorer view 
of the IDE, with default content in the application. xml file as well as 
in several project folders. The selected manifest file is also included in 
the project. 

bada project templates 

The bada IDE provides various project templates that make it easier for 
you to start coding your application. When you create a new project, you 
can select from the following templates: 

► bada Form-based Application 

This template is suitable for creating a simple project based on a form. 
The template contains the basic application functionality as well as the 
functionality for drawing a form on the device screen. 

► bada Flash-based Application 

This template is suitable for creating a simple project based on a flash file. 
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The template contains the basic application functionality as well as the 
functionality for displaying the contents of a flash file on the device screen. 

To use the Flash Based Application template, the FLASH_SERVICE and 
SYSTEM_SERVICE privileges are required. (The SYSTEM_SERVICE privi- 
lege is needed because the Flash Based Application template contains 
privileged methods by default.) 

► bada Empty Project 

This template is suitable for creating a project with project files only without 
any source or include files. The template is used if you have existing source 
files that you want to import into a new project. 

► bada Shared Library 

This template is suitable for creating an application library with shared 
libraries. If you select this template, you need to make sure that the Linker 
of the IDE can access the external libraries at build time. Therefore, you 
need to define the path to the libraries in the project settings. When you 
build the project, the IDE creates the links to the external shared libraries. 

► bada Static Library 

This template is suitable for creating an application library with static 
libraries. If you select this template, you need to make sure that the Linker 
of the IDE can access the external libraries at build time. Therefore, you 
need to define the path to the libraries in the project settings. When you 
build the project, the IDE creates the links to the external static libraries. 

► bada Web Application 

This template is suitable for creating standalone bada Web applications 
using only Web standard technologies, such as HTML5, JavaScript, and 
CSS files. The template contains the bada 2.0 Javascript UI for the creation 
of Web applications with bada native look and feel. 

Project files and folders 

As the Share folder is a reserved folder, a folder with this name cannot be 
created in the /Home default project directory. The /src, /inc, /Home, and / 
Res folders can contain files and folders with a Y prefix; however, those files 
and folders are not copied to the target device. The manifest.xml and appli- 
cation.xml files are stored in the root folder of the project. 
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Adding libraries and library search paths 

In the project properties, you must define all the libraries that you use in 
your application, as well as their search paths. The libraries required for 
using bada APIs are listed under Remarks in the C++ API Reference. The 
default bada library, FOsp, is added automatically to the list of libraries by 
the Application Wizard, but you need to add the other libraries manually. 

For example, if your application uses OpenGL® ES, you must include 
FGraphicsOpengl and FGraphicsEgl in the library list as shown 
under Remarks. 



Necessary Libraries 

If you use any external libraries in your application in addition to those 
included in the bada SDK, you also need to define these libraries and their 
search paths in the application project properties. You can store the static 
libraries anywhere in the file system of your computer. 
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Adding linked libraries 

To add linked libraries and their search paths: 

Select C/C++ Build > Settings in the Properties Window. From the Con- 
figuration drop-down list, select the Target-Debug or Target-Release con- 
figuration. In the Tool Settings tab, select bada C++ Linker > Miscel- 
laneous. Define the libraries to be used under Other objects. To save the 
settings, click Apply. 


4 

* 


For detailed 

technical 
information, visit 

developer.bada.com < 


Adding shared libraries 

To add shared libraries and their search 
paths: 

1. In the bada IDE Project Explorer, add 
a lib folder in your application project. 

2. Copy the shared libraries to the newly cre- 
ated lib folder. 

When you add the shared libraries to the target device, the file name of 
the libraries must start with lib, for example, libLIBRARY.so. 

To use the shared libraries in the Emulator, also copy them to the \<BADA_ 
SDK_HOME>\Model\<Device_model>\Emulator folder. 

3. In the Properties window, select C/C++ Build > Settings. 

4. From the Configuration drop-down list, select the appropriate 
build configuration. 

5. In the Tool Settings tab, select bada C++ Linker > Libraries. 

6. Add the shared libraries to be used under Libraries (-1). 

7. Add the library names without prefix and file extensions, for 
example, LIBRARY. 

Check whether the default library path ${ PROJECT _ ROOT} /lib exists 
under Library search path (-L). If not, set the newly created lib folder as 
the search path. 

8. To save the settings, click Apply. 
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DESIGNING AND 
CREATING THE 
APPLICATION Ul 

Your application’s interface is critical. 
Here are points for you to remember 
while working on the UI. 


A ll bada applications have an application UI. The UI provides 
the form on which you present all your application’s informa- 
tion. In order to maximize user experience, you must carefully 
design and create your application UI. 

The UI of a bada application consists of one or more application screens. 
Each screen is represented by the Osp: :Ui: : Controls : : Form (in the C++ 
framework) or Osp. ui. Controls. Form (in the Web framework) class, 
containing an indicator bar, header, and footer. In addition to these, a 
form contains controls, which can be simple controls or containers that 
can contain other controls. The simple controls (such as buttons and edit 
fields) and containers (such as panels and pop-ups) represent actual user 
interface elements. 


All the forms of an application need to be attached to the Osp : : Ui : : Con 


trols: :Frame (in the C++ framework) or Osp. Ui. Controls. Frame (in the 


Web framework) class, which is the top level window of the application. 
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There can only be one frame per application. 

To create a compelling user interface (UI) for your application, use UI 
Builder included in the bada IDE. UI Builder is a WYSIWYG tool that you 
can use for designing the UI and creating the Form and all UI controls for 
C++ and flash applications. 
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Adding forms 

To add a form to your application resources: 

1. In the bada IDE Project Explorer, select the application project to which 
you want to add a new form. 

2. The Resource Explorer shows the resources of the selected application. 
If the Resource Explorer is 

not visible, select Window > 

Show View > Other > bada 
> Resource Explorer. 

Right-click Forms and 
select New Form. 

3. In the Resource Explorer, 
double-click the new form 
to open it in the work area. 

4. You can add an indi- 
cator bar, header, and 
footer to the form using 
the Properties tab. 

You can also change the 

orientation of the form from 
portrait to landscape. 

5. Create an Osp : :Ui :: Cont 
rols::Form class for the 
designed form: 

• In UI Builder, right-click 
and select Add Class. 

• Enter a class name for 
the form. 

• Enter names for header 
and source files. 

Once you have finished 

adding a form to your applica- New Form in the Resource Explorer 


The bada Project Explorer 
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Resource Explorer Properties tab 


tion resources, you can use the form’s ID (IDF_MAINFORM in the following 
example) to construct the form in your application code: 

• bool Forml: : Initialize () 

• { 

• Form: : Construct (L"IDF _ MAINFORM"); 

SetFormStyle (FORM _ STYLE _ NORMAL | FORM _ STYLE _ INDI- 
CATOR | FORM _ STYLE _ HEADER | FORM _ STYLE _ FOOTER) ; 

• } 

Using Scroll Panels 
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You can add scroll panels toOsp: :Ui: :Controls: :Formclasses and define 
properties for them in the same way you create forms. 

To add and design a scroll panel: 

1. Drag the Scroll Panel control from the ToolBox to a form. 

2. Double-click the new scroll panel in the Resource Explorer to open it in 
the work area. 

3. Design the scroll panel as you design a form. You can add controls to the 
scroll panel from the ToolBox, and define properties for the scroll panel 
and the added controls in the Properties view. 

Once you have finished adding a scroll panel to your application form, 
you can use the scroll panel’s ID (IDC_SCROLLPANELl in the following 
example) to static cast the scroll panel in your application code: 

• bool Forml: lOnlnitializingO 

• { 

• ScrollPanel *pScrollPanel; 

• pScrollPanel = static _ cast<ScrollPanel 
*>GetControl(L"IDC _ SCROLL PANE LI", false)); 

• } 
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Your Scroll Panel added in bada 


Using Pop-ups 

You can add pop-ups and define properties for them in the same way 
you create forms. 

To add and design a pop-up: 
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1. Add a pop-up to the project by right-clicking Popups in the Resource 
Explorer and selecting New Popup. 

2. Double-click the new pop-up instance in the Resource Explorer to open 
it in the work area. 

3. Design the pop-up as you design a form. You can add controls to the 
pop-up from the ToolBox, and define properties for the pop-up and the 
added controls in the Properties view. 

Once you have finished adding a pop-up to your application form, you 
can use the pop-up’s ID (IDP_POPUPl in the following example) to construct 
the pop-up in your application code: 

• bool CommonPopup: : Initialize () 

• { 

• Popup: :Construct (L"IDP _ POPUPl") ; 

• SetName (I/'CommonPopup") ; 

• } 

Using UI Controls 

You can add UI controls to Osp: :Ui: : Controls : : Form classes and define 
properties for them using the UI Builder. 

To add and design a button: 

1. In the bada IDE Project Explorer, select the application project. 

2. Add the button by selecting it in the ToolBox and dragging and dropping 
it onto the form. 

3. Set the properties of the button, such as its size and alignment, in 
the Properties view. 

4. To place the button inside a container control (such as a panel), set the 
container name as the value of the button’s Parent Name property. 

5. To add event listeners for the button, right-click the button and select Add 
event handler. Select the listener to be added, enter an action ID in 
the Action IDfield, and click Finish. 

If you need multiple event listeners, add them one at a time to be able 
to define an action ID separately for each. The action IDs must be unique 
within a form. 

Once you have finished adding the button to your form, you can use its 
ID (IDC_BUTTONl in the following example) to construct the button in 
your application code: 

• bool Forml: :OnInitializing(void) 

• { 




30 


DESIGNING AND CREATING THE APPLICATION UI 


• Button *pButton; 

• pButton = static _ cast<Button *>(GetControl (I/'IDC _ 
BUTTON1", false)); 

• } 

Managing Language Resources 

You can manage the language resources used in localising your applica- 
tion in UI Builder. Localised string resources are useful for resource man- 
agement and localisation, because you can create your application in one 
language and then add the corresponding strings in the other languages 
that you want to support. 

To create string resources: 

1. In the Resource Explorer, double-click String. For detailed 


The following source code snippet demonstrates 
the use of strings from the string resources: 

• Application* pApp = Application: :GetInstance () ; 

• String strl; 

• r = pApp->GetAppResource()->GetString("IDS _ STRING1", 
strl) ; 

English is used if a string resource does not exist for a particular lan- 
guage. However, if a string resource does not exist even for English, the Get- 
String () method fails. 

To use the different languages defined in the string resources on the 
device, go to Settings > General > Language > Display in the device 
menu, and select the corresponding language. □ 


3. Add new languages by right-clicking the 
work area and selecting Language setting. 


2. Add new strings by right-clicking the work 
area and selecting Insert. 


technical 
information, visit 

- developer.bada.com < 
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CODING 

APPLICATIONS 

Best practices while coding your bada 
applications... 


When coding your application, you must consider the following issues: 

1. Initialize the application resources using the Osp::App::Application:: 
OnAppInitializingO (in the C++ framework) orOsp.App. Application. 
onlnitializingO (in the Web framework) event handler. 

Typically, the method implementation takes care of creating the UI and 
restoring the latest application states. Also, the Osp::App::AppRegistry class 
(in the C++ framework) allows the application to save and restore its 
data continuously. 

2. Code application-specific features and functionalities, and handle events. 
Remember to define how the application behaves during the applica- 
tion’s state transitions, such as switching between foreground and back- 
ground. The application must also define event handlers corresponding to 
system events, as necessary. 

3. Destroy allocated resources and save the current application states 


using theOsp: :App: :Application: :OnAppTerminating() (intheC++ 


framework) or Osp. App. Application. onTer mi nating () (in the Web 


framework) event handler. 

The bada Web application can be developed in 2 different ways: 
Using the Osp.Ui namespace 
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The UI is typically created using the UI elements provided in the Ui 
namespace, and the application must explicitly include the Osp.Core and 
Osp.Ui JavaScript files. The commonly used DOM APIs are available for 
the application. 

Without using the Ui namespace 

You can code the application with commonly used constructs of HTML, 
CSS, or JavaScript. You can also use other frameworks, such as jQuery. 

Building applications 

In the bada IDE, different build configurations are available for different 
development steps: 

The Target-Debug build is used to debug and test the application with 
a target device and the Emulator. 

The binary, data, and debug files are stored in a .Target-Debug folder 
under the project in the workspace. The external libraries used by your 
application are linked to the executable binary file and are copied to the 
target file system. 

The Target-Release build is used for the tested, release-ready version 
of the application. 

The compiled binary file is stored in a .Target-Release folder under the 
project in the workspace. 

Building the application in the IDE 

To create an application project build, do one of the following: 

1. Select the build configuration: 

2. Right-click the project in the bada IDE Project Explorer. 

a. Select Build Configurations > Set Active, and select the build 
configuration you need. 

b. Build the application binaries for executing the code: 

c. Select the project in the Project Explorer. 

3. Select Pro j ect > Build Project in the menu. 

a. Check your application project source code for any API or privilege 
violations, which are displayed in the Problems view. 

Running and debugging applications 

Debugging your application enables you to understand its flow of control. 
You can set breakpoints, step in, step out, and step over breakpoints, and 
watch variables to track the changes in their values. 
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C++ and Flash applications 

Debugging C++ and Flash applications with bada IDE is same as with Eclipse 
CDT. In addition to basic Eclipse CDT features, the bada IDE also allows 
you to check the memory usage of the application to identify memory leaks 
while debugging with the Emulator. 

You can run your application in one of the following environments: 
Emulator 

The device Emulator, provided with the bada SDK, imitates the target 
environment running bada applications. Using this replicated environment, 
you can test your application before deploying it to the real target device. 
Target Device 

Running your application on a target device allows you to debug and 
test your application in a real-time environment. 

► Remote Test Lab (RTL) 

If you don’t have a target device, you may wish to use the Remote Test 
Lab (RTL). RTL allows you to install and test applications on supported 
bada devices over the Web using an RTL Eclipse plug-in installed on the 
bada IDE. You can use the RTL devices through the RTL client in the IDE. 

The debugging environment uses GDB (GNU Debugger) for debugging with 
the Emulator and a target device. GDB can debug both locally and remotely. 
Typically, the debugging process is as follows: 

1. Debug your application with the Emulator provided by the bada SDK. 
The Emulator uses a native debugger to give you execution control over 

your applications. The Emulator represents the almost identical function- 
ality of the corresponding device model. 

2. Debug with a target device. 

To debug your application with the Emulator or the target device, 
you must first build the application. Once you have finished debugging 
your application, you can test your application to ensure that it meets 
your requirements. 

Web applications 

You can debug your web applications with the JavaScript Debugger tool 
in the bada IDE. 

You can run your web application in one of the following environments: 
Emulator 

The device Emulator, provided with the bada SDK, imitates the target 
environment running bada applications. Using this replicated envi- 
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ronment, you can test your application before deploying it to the real 
target device. 

Target device 

Running your application on a target device allows you to debug and test 
your application in a real-time environment. 

Running C++ and Flash applications on the emulator 

You can run bada C++ and Flash applications on the emulator using 
the Project Explorer or the bada IDE menu. 

To run your application on the emulator: 

1. Build the application. 

a. If you use the Profiler tool, make sure the build configuration is Target- 
Debug. 

2. Start the run by doing one of the following: 

a. In the Project Explorer, right-click the project and select Run As > 

bada Emulator Application. 

b.In the bada IDE menu, go to Run > Run As > bada 
Emulator Application, 
c. The Emulator opens. 

3. Use the application in the Emulator as you would in a target device. 

a. While the application is running, the IDE’s Output view shows the 
log, debug, and exception messages from the methods defined in 
the Log Macros. 

b. While running the application, you can speed up repetitive tasks, 
such as login sequences, by using the UI Sequencer tool. 

4. To terminate the run, do one of the following: 

a. Click the Terminate button in the Console or Debug view. 

b. Select Close from the Emulator menu. 

Using the Emulator in Debugging 

To debug your application with the Emulator: 

1. To start debugging, right-click the project and select Debug As > bada 
Emulator Application. 

The debug messages are displayed in the IDE’s Console view. To see the 
GDB console, in the Console view, click the Display Selected Console button 
and select the option containing gdb. With the GDB console, you can also 
execute GDB commands. 

Do not step out during debugging inside the OspMain ( ) event handler in 
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the <ProjectName>Entry.cpp file. The program counter has problems when 
stepping out during debugging in the OspMain() event handler because 
the OspMain() event handler is the entry point for bada applications, and 
the upper call stack is the Windows ntdll.dll library. 

2. To stop debugging, do one of the following: 

• In the bada IDE, in the Console or Debug view, click the Termi- 
nate button. If the application execution is not suspended before you 
click theTerminate button, touch an arbitrary control on the screen 
or press a hard key on the Emulator after clicking Terminate. 

• On the Emulator, press the End key. 

After debugging, run your application again to check its functionality 



Debugging Environment 


and to ensure that the bugs detected during the debugging process are fixed. 
Running Web Applications on the Emulator 

You can run bada Web applications on the Emulator using the Project 
Explorer or the bada IDE menu. 

To run your application on the Emulator: 

1. Start the run by doing one of the following: 

• In the Project Explorer, right-click the project and select Run As > 
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bada Emulator Web Application. 

• In the bada IDE menu, go to Run > Run As > bada Emulator 
Web Application. 

The Emulator opens. 

2. Use the application in the Emulator as you would in a target device. 

While the application is running, the IDE’s Output view shows the log, 
debug, and exception messages. 

To terminate the run, do one of the following: 

1. Click the Terminate button in the Console or Debug view. 

If the application execution is not suspended before you click the Ter- 
minate button, touch an arbitrary control on the screen or press a hard key 
on the Emulator after clicking Terminate. 

2. Select Close from the Emulator menu. 

Using the Emulator in Debugging 

To debug your Web application with the Emulator: 

1. To launch the application in the Emulator: 

In the Project Explorer, right-click the project and select Run As > 
bada Emulator Web Application. 

• In the bada IDE menu, go to Run > Run As > bada Emulator 
Web Application. 

2. After the application has launched, start the JavaScript Debugger. 

3. In the bada IDE menu, go to Run > Start JavaScript Debugging. 

4. The JavaScript error and log messages are displayed in the JavaScript 
Debugger’s Console panel. 

To stop debugging, do one of the following: 

1. In the bada IDE, in the Console or Debug view, click the Terminate button. 
If the application execution is not suspended before you click the Ter- 
minate button, touch an arbitrary control on the screen or press a hard key 
on the Emulator after clicking Terminate. 

2. On the Emulator, press the End key. 

After debugging, run your application again to check its function- 
ality and to ensure that the bugs detected during the debugging process 
are fixed. 

Running C++ and Flash Applications on a Target Device 
To run your application on a target device: 

1. Connect the target device to your computer. 

2. Configure the target device for running applications on it. 

3. To use the Profiler tool, configure the application for profiling. 
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4. Build the application. 

If you use the Profiler tool, make sure the build configuration is Target- 
Debug. 

5. Start the run by doing one of the following: 

a) In the Project Explorer, right-click the project and select Run As > 

bada Target Application. 

b) In the bada IDE menu, go to Run > Run As > bada 
Target Application. 

The executable binary, resource files, and data files are downloaded 
before starting the run, and the application is installed automatically while 
it runs. 

While the application is running, the IDE’s Output view shows the log, 
debug, and exception messages from the methods defined in the Log Macros. 

6. While running the application, you can speed up repetitive tasks, such 
as login sequences, by using the UI Sequencer tool. 

7. To terminate the run, do one of the following: 

a) In the bada IDE, click the Terminate button in the Con- 
sole or Debug view. 

b) In the target device, press the End key. 

8. After the run, the results of the application profiling are displayed in 
the Profile view. 

9. Disconnect the target device. 

While running the application, you can also use the Performance Ana- 
lyzer tool to check your application’s performance during execution. 

Using a Target Device in Debugging 

The target device debugging has the following limitations: 

Due to hardware limitations, you can insert at most 10 breakpoints. 
You cannot insert watchpoints to monitor the variables used in 
your application. 

You cannot use the Step Into option (a button in the Debug view) for 
target debugging; in the debugging mode, bada applications are built 
using the -fpicGDB command, which means that the addresses of the 
symbols, such as variables and APIs, cannot be determined unless 
they are loaded in the memory. To examine the application as it steps 
into disassembled code, enable the Instruction Stepping Mode option 
in the Debug view. 

Do not step out during debugging inside the OspMain ( ) event handler 
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in the <ProjectName>Entry.cpp file. The program counter has problems 
when stepping out during debugging in the OspMain() event handler 
because the OspMain() event handler is the entry point for bada applica- 
tions, and the upper call stack is the Windows ntdll.dll library. 

Only the latest application installed by the IDE can be executed from 
the main menu of the target device. 

To debug your application with a target device: 

1. Connect the target device to your computer. 

2. Configure the target device for debugging. 

3. Set your target device to the debug mode: 

• In a device supporting API version 1.2.0 or higher: 
Select Settings > Connectivity > USB utilities > Debug- 
ging. 

• In a device supporting API version prior to 1.2.0: 
Select Settings > Connectivity > Mass storage > 
USB debugging. 

4. To start debugging, right-click the project and select Debug As > bada 
Target Application. 

The debug messages are displayed in the IDE in the Console view. To 
see the GDB console, in the Console view, click the Display Selected Con- 
sole button and select the option containing gdb. With the GDB console, 
you can also execute GDB commands. 

5. To stop debugging, do one of the following: 

• In the bada IDE, in the Console or Debug view, click the Termi- 
nate button. If the application execution is not suspended before you 
click theTerminate button, touch an arbitrary control on the screen 
or press a hard key on the target device after clicking Terminate. 

• On the target device, press the End key. 

6. Disconnect the target device. 

After debugging, run your application again to check its functionality 
and to ensure that the bugs detected during the debugging process are fixed. 

Running web applications on a target device 

You can run bada web applications on the target device using the Project 
Explorer or the bada IDE menu. 

To run your application on a target device: 

1. Connect the target device to your computer. 

2. Configure the target device for running applications on it. 
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3. Start the run by doing one of the following: 

• In the Project Explorer, right-click the project and select Run As > 

bada Target Web Application. 

• In the bada IDE menu, go to Run > Run As > bada 
Target Application. 

The package (code and data files) is downloaded before starting the run, 
and the application is installed automatically while it runs. 

While the application is running, the IDE’s Output view shows the log, 
debug, and exception messages. 

4. To terminate the run, do one of the following: 

• In the bada IDE, click the Terminate button in the Con- 
sole or Debug view. 

If the application execution is not suspended before you click the Ter- 
minate button, touch an arbitrary control on the screen or press a hard key 
on the target device after clicking Terminate. 

• On the target device, press the End key. 

5. Disconnect the target device. 

Using a Target Device in Debugging 

To debug your application with a target device: 

1. Connect the target device to your computer. 

2. Configure the target device for debugging. 

3. Launch the application by doing one of the following: 

• In the Project Explorer, right-click the project and select Run As > 
bada Target Web Application. 

• In the bada IDE menu, go to Run > Run As > bada 
Target Application. 

4. Make sure that your current IP address is static. JavaScript debugging 
cannot be operated appropriately on a target device if your computer 
has a dynamic IP address. 

5. After the application has launched, start the JavaScript Debugger. 

In the bada IDE menu, go to Run > Start JavaScript Debugging. 
The JavaScript error and log messages are displayed in the JavaScript 
Debugger’s Console panel. 

6. To stop debugging, do one of the following: 

• In the bada IDE, in the Console or Debug view, click 
the Terminate button. 

If the application execution is not suspended before you click the Ter- 
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minate button, touch an arbitrary control on the screen or press a hard key 
on the target device after clicking Terminate. 

• On the target device, press the End key. 

7. Disconnect the target device. 

After debugging, run your application again to check its functionality 
and to ensure that the bugs detected during the debugging process are fixed. 

Packaging applications 

After your application has been successfully tested on the Emulator and 
the target device, you need to package it. You can package your appli- 
cation using bada IDE, or use a command line command to build and 
package it at the same time. The command line is only available for C++ 
and Flash applications. 

The C++ and Web frameworks use the same packaging format, however, 
the Web framework has a few extensions. For example, you can provide a 
network access control list (which defines the domains that are allowed to 
access the network) in the /Res/config.xml file of the Web application. The web 
application package does not contain any C++ source code files or binaries. 

Packaging Applications with the bada IDE 

In case of a web application, skip steps 1 and 3a. 

In order to package your application using bada IDE: 

1. If you have made changes to the application after testing it, re-build 
the application. 

2. Package your application by first selecting the project in the Project 
Explorer and then selecting Project > Make Package in the menu. 

3. In the Make Package window: 

a. Select Target-Debug or Target-Release as the configuration. 

b. Select the files and folders to include in the bada application 
package file. 

c. Enter a name for the application package and select an output folder. 

d. Click Make to proceed with the creation of the package. 

The application package, by default <application>_<buildconfiguration>. 
zip (for the C++ framework) or <application>_Target-Release.zip(for the Web 
framework), is stored under the project folder. The package automatically 
includes all the required files: the binaries (.exe and .dll files), resources and 
the manifest.xml and application.xml files. 

4. Check the package in the project folder to ensure that the packaging 
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was successful. 

Packaging Applications with the Command Line 

To build and package your application through the command line: 

1. Run the following commands: 

• cd <BADA _ SDK _ HOME>\Tools\MakePackage 
MakePackage.exe TYPE _ OPTION PRO JECT _ PATH 

Where PROJECT_PATH is the location of the project to be packaged and 
TYPE_OPTION is the build configuration to be used: 

• -td = Target-Debug 

• -tr = Target-Release 

For example, the MakePackage.exe -tr C :\MyWorkspace\ 
MyProject command builds and packages the bada application 
project stored under C:\MyWorkspace\MyProject with the Target- 
Release configuration. 

2. Check the package in the project folder to ensure that the packaging 
was successful. 

Certifying and Publishing Applications 

After you have packaged your application, you are ready to certify and 
publish your application. 

To certify and publish your application: 

1. Upload your application to Samsung Apps Seller Office for certifying. 
Samsung Apps Seller Office compares the manifest file in the package 

to the original file that was created when the application was registered 
and defined on the bada developer site. Samsung Apps Seller Office checks 
whether the application functions properly. 

If your application passes the check, it gets signed as a certified 
application installer package, <Application_name>.oap, which contains 
the<Application_name>.zip file and a signature.xml file. 

2. Check your application to Samsung Apps Seller Office for selling. 
Samsung Apps Seller Office checks whether the application func- 
tions properly. If the application is approved, the application status on the 
bada developer site changes from “Development” to “In operation”. When 
the application has this status, it is no longer possible for you to modify 
the application. 

If the application is not approved by Samsung Apps Seller Office, its 
status remains as “Development”. 
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The bada developer site and Samsung Apps Seller Office provide you 
with convenient tools to manage the life-cycle of your mobile applica- 
tion once it is in operation. If you want to upgrade your application after 
certification, see Upgrading Applications. If you want to withdraw your 
application from distribution and operation, you 
need to request for application retirement on 
Samsung Apps Seller Office. 


4 

* 


For detailed 

technical 
information, visit 

developer.bada.com < 
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Upgrading Applications 

You can make upgrades to your application 
even after you have certified it at Samsung Apps 
Seller Office and it is on sale at Samsung Apps. 

To upgrade the application: 

1. If you have changed the development environment or API ver- 
sion of the application, check the Application Migration Guide for 
detailed instructions. 

2. Update your application version and download an updated manifest file 
from the bada developer site. 

3. Update the application code as needed. 

4. If needed, update privileges groups and download an updated manifest 
file again from the bada developer site. 

5. Build, test, and repackage the application. 

6. Register the upgraded application on Samsung Apps Seller Office. 
When a previously installed application is upgraded on a device, you 

can decide which data files from the old version are kept and which are 
deleted. The common bada upgrade policy is to overwrite all the applica- 
tion package files, while keeping the user-created files and directories. 
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Hello World is a term all developers 
are familiar with. Here you’ll find the 
standard procedure in building your 
first app 


Creating a HelloWorld application 

1. Define your application details on the bada developer site and download 
the manifest file. 

For the purposes of familiarizing yourself with the IDE and SDK, you 
can create the HelloWorld application without registering it on the bada 
developer site. When creating an application without registration, use the 
default manifest file provided in the SDK. 

2. Creating the HelloWorld Project 

a. Launch the IDE by selecting Start > Programs > bada SDK >1 


badalDE. 


Create the application project in the IDE. 

b. During the project creation, define HelloWorld as the name of your 
project, select the project type as Form Based Application, and 
select the downloaded manifest file (if you downloaded one in the 
previous step). For all other values, use the default values in the 
application wizard. 

3. The new HelloWorld project is shown in the Project Explorer view of 
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the IDE, with default content in the application.xml file as well as in 
several project folders. The selectedmanifest.xml file is also included 
in the project. 

4. Creating the application code 

Your Hello Wo rid project uses the Form Based Application template. 
As such, your project’s source files already contain some of the basic 
application functionality. 

The automatically-included code creates an application with the title 
“Hello bada”. To change the title to Hello World, take the following steps: 

1. Select IDF_FORMl (1). 

2. Select the header (2). 

3. Select the Properties view (3). 

4. Scroll down the Properties view until you find the Title Text row. Change 
“Hello bada!” to “Hello World” (4). 

Basic app 

This chapter, based on the BasicApp sample delivered with the bada SDK 
in \<BADA_SDK_HOME>\Samples\BasicApp, demonstrates how you can 
use the Osp::Ui namespace to implement the basic UI functionalities in the 
bada C++ application. 

Basic App - Form 

The BasicApp sample application uses the bada Form Based Appli- 
cation template, which contains a preset Osp::Ui::Controls::Form class. 
Most methods used in the sample remain as they were created in the 
project template. 

To Initialize the Application 

a. The header file declares the form and listener interface used 
by the MainForm class. The application functionality requires 
the Osp::Ui::IActionEventListener interface to be defined to listen to 
button and footer item events, allowing other parts of the application 
to react to them. 

class MainForm: 

• public Osp: :Ui: :Controls: :Form, 

• public Osp: :Ui: : IActionEventListener 

b. A common way to map functions to specific UI controls is to use action 
IDs, such as in the following snippet. The ID_FOOTER_ITEM* values 
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are used for identifying the items defined in the footer area of the device 
screen, and the ID_ORIENTATION value is meant for the Osp::Ui::Co 
ntrols::Button instance we intend to make for the Orientation panel, to 
flip the device display between portrait and landscape modes. 

The action IDs are used by the OnActionPerformedO event handler 
when determining the consequences of the user actions. 



A basic app in Landscape and portrait mode 


The header file also declares the required event handlers for the MainForm class, 
protected: 

• static const int ID _ FOOTER _ ITEMl = 101; 

• static const int ID _ FOOTER _ ITEM2 = 102; 

• static const int ID _ FOOTER _ ITEM3 = 103; 

• static const int ID _ FOOTER _ ITEM4 = 104; 

• static const int ID _ ORIENTATION = 200; 

• int _ _ panelld; 

• Osp: :Ui: :Controls: :Panel* _ _pPanel[4]; 

Osp: :Ui: :Controls: :Button* pButtonOrientation; 


public: 

• virtual result Onlnitializing(void) ; 

• virtual result OnTerminating(void) ; 

virtual void OnActionPerformed(const Osp: :Ui: :Control& 
source, int actionld); 


it 
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Create the form 

1. The Initialize () method constructs the Form instance for the applica- 
tion (using the XML file created with UI Builder), and sets the first panel 
to be displayed. 

• bool MainForm: initialize (int panelld) 

• { 

• Form: : Construct (I/'IDF _ MAINFORM"); 

if (panelld >= 0 && panelld <= 3) 

• _ _ panelld = panelld; 

• return true; 

• } 

2. The OnlnitializingO event handler is used to create instances and 
set styles for the form content. First, a header is created defining the title 
text for the form. 

• result MainForm: :OnInitializing(void) 

• { 

• result r = E _ SUCCESS; 

• Rectangle clientRect = GetClientAreaBounds () ; 

Rectangle rect(0, 0, clientRect .width, clientRect. 

height) ; 

• // Create header 

• Header * pHeader = GetHeader(); 

if (pHeader) 

{ 

• pHeader->Set Style (HEADER _ STYLE _ TITLE) ; 

• pHeader->SetTitleText ("Basic App"); 

} 

3. The a tab-style footer is created, and the footer tab items are defined. 
An event listener is added to the footer to allow the footer item clicks 

to be tracked. 

• // Create footer 

• Footer* pFooter = GetFooter(); 
if (pFooter) 

{ 




HELLOWORLD 


47 


pFooter->SetStyle (FOOTER _ STYLE _ TAB); 

• // Create the Button footer item 

• Footerltem footerlteml; 

footerlteml. Construct (ID _ FOOTER _ ITEMl); 

• footerlteml. SetText ("Button") ; 

• pFooter->AddItem(footerIteml) ; 

// Other footer items are set here 
pFooter->AddActionEventListener (*this) ; 

} 

4. The panels are created and added to the form. 

• // Create the Button panel 

ButtonPanel* pButtonPanel = new ButtonPanel () ; 

• pButtonPanel->Initialize (rect) ; 

• AddControl (*pButtonPanel) ; 

• pPanel[0] = pButtonPanel; 


// Orientation panel was created with UI Builder, 

// so only its button events must be defined here 

• _ _pPanel[l] = static _ cast<Panel *>(GetControl("IDC _ 
ORIENTATIONPANEL") ) ; 

• if ( _ _ pPanel [1] ) 

{ 

• _ _ pButtonOrientation = static _ cast<Button 
*> (GetControl ("IDC _ BUTTON _ ORIENTATION", 

• true)); 
if(_ _ pButtonOrientation) 

{ 

• _ _ pButtonOrientation->SetActionId(ID _ ORIENTA- 
TION); 

• _ _ pButtonOrientation- 
>AddActionEventListener (*this) ; 

} 

} 

// Image and Privilege panels are created similarly as 
the Button panel 

5. Finally, set the current panel to be selected in the footer, and use the Set- 
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Shows t ate () method to show the current panel on the screen. 

// Set the current panel as selected in the footer and 
display it on the form 
if (pFooter) 

{ 

• pFooter->SetItemSelected( _ _ panelld); 
if(_ _ panelld == 2) 

• SetOrientat ion (ORIENTATION _ AUTOMATIC); 

• _ _ pPanel [0] ->SetShowState (false) ; 

• _ _ pPanel[l]->SetShowState(false); 

• _ _ pPanel [2] ->SetShowState (false) ; 

• _ _ pPanel[3]->SetShowState(false); 

• _ _ pPanel [_ _ panelld] ->SetShowState (true) ; 

} 


• Draw(); 

• Show(); 

• return r; 

• } 

6. The OnTerminatingO event handler is called each time a panel is ter- 
minated. At this point, the current application settings (the latest used 
panel) are saved to the application registry, which can be used to restore 
the settings the next time the application is executed. 

Respond to Action events 

The OnAct ionPer formed ( ) event handler uses the switch-case structure 
to define the action that occurs when the UI controls are triggered (a footer 
item or the button on the Orientation panel is clicked). The triggers are rec- 
ognized by the source and action ID parameters passed to this event handler. 

• void MainForm: :OnActionPerformed(const Osp: :Ui: :Control& 
source, int actionld) 

• { 

switch (actionld) 

{ 

• case ID _ FOOTER _ ITEM1: 

{ 

• pPanel [0] ->SetShowState (true) ; 
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• _ _ pPanel[l]->SetShowState(false); 

• _ _ pPanel [2] ->SetShowState (false) ; 

• _ _ pPanel[3]->SetShowState(false); 

• SetOrientation (ORIENTATION _ PORTRAIT) ; 

} 

• break; 

// Orientation panel is handled similarly, while 
the orientation 

// is set to ORIENTATION _ AUTOMATIC for the Image 

panel 

• case ID _ FOOTER _ ITEM4: 

{ 

• _ _ pPanel [0] ->SetShowState (false) ; 

• _ _ pPanel[l]->SetShowState(false); 

• _ _ pPanel [2] ->SetShowState (false) ; 

• _ _ pPanel [3] ->SetShowState (true); 

• PrivilegePanel *pPrivilegePanel = dynamic _ 
cast<PrivilegePanel*>( _ _ pPanel [3]); 

• pPrivilegePanel->UpdatePanel () ; 

• SetOrientation (ORIENTATION _ PORTRAIT) ; 

} 

• break; 

• case ID _ ORIENTATION: 

{ 

• if(_ _ pPanel [1] ->GetShowState () ) 

{ 

• OrientationStatus status = GetOrientation- 

Status () ; 

• if (status == ORIENTATION _ STATUS _ PORTRAIT) 

{ 

• SetOrientation (ORIENTATION _ LANDSCAPE) ; 

} 

• else if (status == ORIENTATION _ STATUS _ LAND- 
SCAPE) 

{ 

• SetOrientation (ORIENTATION _ PORTRAIT); 

} 

} 
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} 

• default: 

• break; 

} 

• Draw(); 

• Show(); 

• } 

Basic App - Panels 

The BasicApp sample application uses the bada Form Based Applica- 
tion template, which contains a preset Osp: :Ui: : Controls: :Form cla 

ss. Most methods used in the sample remain as they were created in the 

project template. 

Initialise the application 

1. ImagePanel.h Header File 

a. The Image panel displays a bitmap image, whose size depends on 
the screen orientation. Apart from declaring the Osp::Ui::Controls:: 
Panel class, the Osp: :Ui: :IOrientationEventListener interface 
is also declared to react to changes in the screen orientation. 

class ImagePanel: 

• public Osp: :Ui: :Controls: :Panel, 

• public Osp: :Ui: : IOrientationEventListener 

b. The Osp::Graphics::Bitmap class is used to encapsulate a bitmap, which 
consists of pixel data for a graphics image. 
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Event handlers are also declared to support user interactions with 
the application, 
protected: 

• Osp: :Graphics: :Bitmap _ pBadaBitmap; 

public: 

• virtual result Onlnitializing(void) ; 

• virtual result OnTerminating(void) ; 

• virtual result OnDraw(void) ; 

virtual void OnOrientationChanged(const Osp: :Ui: :Control 
&source, 

• Osp: :Ui: :OrientationSt 
atus orientationStatus); 

2. PrivilegePanel.h Header File 

The Privilege panel displays two Osp: :Ui: :Controls: :Button ins 
tances, and the header file declares action IDs for the buttons, to allow 
the Osp: :Ui: :IActionEventListener interface to track button presses, 
class PrivilegePanel: 

• public Osp: :Ui: :Controls: :Panel, 

• public Osp: :Ui: :IActionEventListener 

• { 

• public: 

• PrivilegePanel (void); 

• virtual -PrivilegePanel (void) ; 

• public: 

result Initialize (Osp: :Graphics: :Rectangle rect); 

• void UpdatePanel(void); 

• protected: 

• static const int ID _ BUTT0N1 = 101; 

• static const int ID _ BUTTON2 = 102; 

• public: 

• virtual void OnActionPerformed(const 
Osp: :Ui: :Control& source, 

• int actionld); 

• }; 

To Create the Image Panel 

1. There are 2 important methods called when the Image panel 
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is launched: InitializeO and OnlnitializingO. The Ini- 
tial i z e ( ) method constructs a rectangular panel, 
result Image Panel: : Initialize (Osp: : Graphics : : Rectangle rect) 

• { 

• result r = E _ SUCCESS; 

• Panel: :Construct (rect ); 

• return r; 

• } 

2. The OnlnitializingO event handler deals with decoding the given 
image into the desired bitmap format using the DecodeNQ method, 
result Image Panel : :OnInitializing (void) 

• { 

• result r = E _ SUCCESS; 

• Image image; 

• image. ConstructO; 

_ pBadaBitmap = image. DecodeN(L"/Res/ScreenDensity- 

High/bada.png", 

• BITMAP _ PIXEL _ FORMAT 

ARGB8888); 


return r; 

• } 


3. The OnDr aw ( ) event handler requests for the current canvas (GetCan- 
vasN()), the location and size of the canvas (Get Bounds ()), and the 
orientation status of the screen (GetOrientationStatus ()). 

Based on the value returned by the GetOrientationStatus () method, 
the bitmap image is drawn on the screen using the Dr awBitmap ( ) method, 
result Image Panel : : On Dr aw (void) 

• { 

• result r = E _ SUCCESS; 

Form *pForm = static _ cast<Form *> (GetParent () ) ; 

• Canvas* pCanvas = GetCanvasN() ; 

• Rectangle rt = pCanvas->GetBounds () ; 
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if(pCanvas != null && _ _ pBadaBitmap != null) 

{ 

Rectangle clientRect = pForm->GetClientAreaBounds () ; 
Rectangle rt(0, 0, clientRect .width, clientRect. 

height) ; 

• OrientationStatus status = pForm- 

>GetOrientationStatus () ; 


// Fill the client area with the bitmap with aspect 
ratio maintained 

if (status == ORIENTATION _ STATUS _ PORTRAIT 
• | | status == ORIENTATION _ STATUS _ PORTRAIT 

REVERSE) 

{ 


int width = rt. width; 


• int height = rt. width* _ _ pBadaBitmap- 
>GetHeight ()/ _ _ pBadaBitmap->GetWidth () ; 

• pCanvas->DrawBitmap (Rectangle (rt.x, (rt.y + ((rt. 
height-height)/2)) , 


Bitmap) ; 


width, height), * pBada- 


} 


else if (status == ORIENTATION _ STATUS _ LANDSCAPE 
I I status == ORIENTATION STATUS LAND- 


SCAPE _ REVERSE) 

{ 


• int height = rt. height; 

• int width = rt. height* _ _ pBadaBitmap- 
>GetWidth()/ _ _ pBadaBitmap->GetHeight () ; 

• pCanvas->DrawBitmap (Rectangle ( (rt.x+( (rt.width- 
width)/2)), rt.y, 


width, height), * pBada- 


Bitmap) ; 

} 

delete pCanvas; 


return r; 

} 


4. The OnOrientationChanged() event handler changes 
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the width and height parameters of the screen by switching the orien- 
tation based on the orientation status of the device. 

void ImagePanel: :OnOrientationChanged(const Osp: :Ui: :Control 
Ssource, 

• Osp: :Ui: :Orientation 
Status orientationStatus) 

• { 

Form *pForm = static _ cast<Form *> (GetParent () ) ; 

• if(pForm) 

{ 

Rectangle clientRect = pForm->GetClientAreaBounds () ; 
Rectangle rt(0, 0, clientRect .width, clientRect. 

height) ; 

• SetBounds (rt) ; 

} 

• } 

Create the Privilege panel 

1. The Privilege panel attempts to use methods that require certain privilege 
groups, and tests whether these methods have the required privileges. 
The Initialize () method creates four labels and two buttons to test 
for access to privilege groups. 

result Pr ivi lege Panel : ilnitialize (Osp: : Graphics: : Rectangle 
rect) 

• { 

• result r = E _ SUCCESS; 

• Panel: :Construct(rect) ; 

• // Create a label 

• Label *pLabell = new Label(); 
pLabell->Construct (Rectangle (250, 205, 180, 50), 

L"Result") ; 

• pLabell->SetName (L"Labell") ; 
pLabell->SetTextVertical Alignment (ALIGNMENT _ MIDDLE); 
pLabell->SetTextHorizontalAlignment (ALIGNMENT _ CENTER); 

• AddControl (*pLabell) ; 

• // Similarly, create Label2 for "Result" 

• Label *pLabel3 = new Label(); 
pLabel3->Construct (Rectangle (25, 100, 440, 50), L"With a 

privilege") ; 

• pLabel3->SetName (L"Label3") ; 
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pLabel3->SetTextVertical Alignment (ALIGNMENT _ MIDDLE); 
pLabel3->SetTextHorizontalAlignment (ALIGNMENT _ LEFT); 
AddControl (*pLabel3) ; 

// Similarly, create Label4 for "Without a privilege" 

// Create a button 
Button *pButtonl = new Button (); 
pButtonl->Construct (Rectangle (55, 190, 170, 70)); 
pButtonl->SetText (L"Test") ; 
pButtonl->SetActionId(ID _ BUTTONl) ; 
pButtonl->AddActionEventListener (*this) ; 

AddControl (*pButtonl) ; 

// Similarly, create Button2 

return r; 

} 


2. The UpdatePanel ( ) method is used to refresh the labels every time the 
panel is selected. 

void Privi lege Pane 1 : : UpdatePanel (void) 

• { 

• Label *pLabel = static _ cast<Label 
*> (GetControl (L"Labell") ) ; 

if(pLabel != null) 

• pLabel->SetText (L"Result") ; 

• // Label2 is handled in the same way 

• } 

3. The OnActionPerformedO event handler defines cases for the two 
action IDs mentioned in the Privi legePanel.h file. 

The two methods that require privileges are Systemlnfo: :GetValue () 
and WebHistory: :Construct(), called because 
the pButtonl and pButton2 buttons have been clicked, respectively. 

Only the Systemlnfo: :GetValue () method is successful, since its 
required privilege has been set in the manifest file. 

void PrivilegePanel: :OnActionPerformed(const 
Osp: :Ui: :Control& source, int actionld) 


it 
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result r (E _ SUCCESS) ; 
switch (act ionld) 

{ 

case ID_BUTTONl: 

{ 

Label *pLabel = static _ cast<Label 
*> (GetControl (L"Labell") ) ; 

String value; 

// The SYSTEM _ SERVICE privilege is required 
String key (L"PlatformVersion") ; 
r = Systemlnfo: :GetValue (key, value); 
if (r != E _ PRIVILEGE _ DENIED) 

{ 

if(pLabel != null) 

pLabel->SetText (L"Success") ; 

} 

else 

{ 

AppLogException ("Failed to check the SYSTEM 
SERVICE privilege. [%s]", 

GetErrorMessage (r) ) ; 
if(pLabel != null) 

pLabel->SetText (L"Denied") ; 

} 

} 

break; 

case ID _ BUTT0N2 : 

{ 

Label *pLabel = static _ cast<Label 
*> (GetControl (L"Label2") ) ; 

WebHistory webHistory; 

// The WEB _ PRIVACY privilege is required 
r = webHistory. ConstructO; 
if (r == E _ PRIVILEGE _ DENIED) 

{ 

if(pLabel != null) 

pLabel->SetText (L"Denied") ; 
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} 

else 

{ 

AppLogException ("Failed to check the WEB 
PRIVACY privilege. [%s]", 

GetErrorMessage (r) ) ; 
if(pLabel != null) 

pLabel->SetText (L"Abnormal") ; 

} 


} 


break; 


} 


Draw() ; 
Show() ; 


For detailed 

technical 
information, visit 

developer.bada.com 
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HELLOFLASHAPP 

All you need to know so you could create 
a Flash application for your bada device 


T his chapter demonstrates how you can create a simple Hello- 
FlashApp application. Well look at familiarising yourself with 
the bada application development process as well as with using 
the bada SDK by creating a simple HelloFlashApp application 
that contains the basic bada Flash application functionality and displays 
a form on the device screen. 


Creating a HelloFlashApp application 

1. Creating the Application profile 

Define your application details on the bada developer site and down- 
load the manifest file. To use the Flash based application template in 
your project, the flash _ service and system _ service privileges are 
required. (The SYSTEM _ SERVICE privilege is needed because the Flash 
based Application template contains privileged methods by default.) 

For the purposes of familiarising yourself with the IDE and SDK, you 
can create the HelloFlashApp application without registering it on the bada 
developer site. When creating an application without registration, use the 
default manifest file provided in the SDK. 

2. Creating the HelloFlashApp Project 


a. Launch the IDE by selecting Start > Programs > bada SDK >1 
badalDE. 
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b. Create the application project in the IDE. 

During the project creation, define HelloFlashApp as the name of your 
project, select the project type as Flash Based Application, and select the 
downloaded manifest file (if you downloaded one in the previous step). 
Specify in the Flash file field the location where you have stored the flash 
file that you want to play (for practice purposes, you can use the.swf files 
provided within the FlashControl sample application in the bada SDK). For 
all other values, use the default values in the application wizard. 

3. The new HelloFlashApp project is shown in the Project Explorer view 



Defining the flash file location 
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HelloFlashApp project 


of the IDE, with default content in the application.xml file as well as in 
several project folders. The selectedmanifest.xml file is also included in 
the project. 

4. Creating the Application Code 

Your HelloFlashApp project uses the Flash Based Application template. 
As such, your project’s source files already contain some of the basic flash 
application functionality. 

The automatically- included code creates an 
application with a flash control laid on the 
main form. You can use UI Builder to set the 
style and layout of the flash control. Addition- 
ally, you can define the properties, such as 
background color, local file path, and quality, 
for each control. □ 


For detailed 

technical 
information, visit 

developer.bada.com r* 
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WEB 

PROGRAMMING 

FOR BADA 

bada offers your flexibility in developing 
web applications 


Samsung bada provides a wide range of namespaces that allow you to take 
full advantage of various bada features. 

Basics of bada web programming 

You need to take into account the following programming concepts when 
designing bada web applications: 


Class 


A class is a central concept in most of the object-oriented languages. It is 
declared using the Class keyword with an uppercase ‘C’, and by providing 
its name as a string: 


Osp. Class. define ("My. Cool. Class" ) ; 


The above example creates a trivial class called 
no functionality. 


My. Cool .Class 


with 


A class declaration can contain object-oriented features, such as the con- 
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NAMESPACE 

PURPOSE 

App 

This namespace contains classes and interfaces that provide the basis of 
application development. It enables a web application to interact with the 
bada platform and other web applications. 

Core 

This namespace contains classes and interfaces for the building blocks of 
object-oriented programming. It provides several JavaScript APIs in addition 
to the set of standard DOM and Ecmascript APIs. 

Locales 

This namespace contains classes to make it easy to localize your application 
for international markets, ensuring that numbers, dates, and currencies are 
all displayed in a way that is appropriate for a particular location. 

Ui 

This namespace contains classes required for implementing a user interface 
(UI) for your application. The Ui namespace contains the base classes for all 
UI controls, as well as interfaces for event handlers. 

WAC 

This namespace provides access to native services available on the device, 
including calendar, camera, and accelerometer sensor. 


structor, the instance members, and the static members. The web framework 
supports a closed form of the class declaration where the entire declaration is 
provided within the define (name, config) method. In this method, name is 
a fully- qualified class name, and config is a configuration map with various 
sections defined by keys: 

• Osp. Class. define ("My. Cool. Class", 

• { 

• // Configuration map 

• I); 

Class types 

The web framework supports various class types, which are specified by 
the type key within the configuration map of the class definition: 

Regular class 

Contains class variables or class methods (in the statics section), and instance 
variables or instance methods (in the members section). 

A regular class can be instantiated using the new keyword: 

var myClass = new My. Cool .Class; 

Since the class can be instantiated with the new keyword, a constructor 
must be given in the constructO method. 

Static class 

Is often a helper or utility class. A static class is not instantiated and only 

tfwifcdiSitfCT. 
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contains static members. Setting the type key to static allows only static 
members to be defined in the class definition. 

Abstract class 

Is a base class that needs to be derived as a concrete class. Do not create an 
instance of the abstract class. Declare an abstract class by setting the type key 
to abstract. 

• Osp. Class. define ("My. Cool. Class", 

• { 

• type: "abstract" 

• }); 

Singleton 

Creates a single instance of a class. Every time an instance is requested, either 
the created instance is returned or a new one is created and returned. The 
instance of a singleton class is requested with the getlnstanceO method. 
Declare a singleton class by setting the type key to singleton. 

• Osp. Class. define ("My. Cool. Class", 

• { 

• type: "singleton", 

• extend: My. Great. Superclass 

• }); 

Class members 

There are two types of class members: static members (also simply called 
class members) and instance members: 

Static members are defined in the class itself, not in individual instances. 
A static member of a class can be a class variable or a class method. 
Static members are written in uppercase to distinguish them from 
instance members. 

Static members are declared in the statics section of the class definition. 
Static methods are given by providing a function declaration, while all other 
values declare static variables: 

• Osp. Class, define ("Osp. Test .Cat", 

• { 

• statics: 

{ 

• LEGS: 4, 

• makeSound: function() { } 

} 
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• }); 

Static members can be accessed by using the fully- qualified class name. 
They cannot be inherited. 

• var foo = Osp.Test .Cat .LEGS; 

• alert (Osp.Test .Cat .makeSound() ) ; 

Instance members are assigned to each individual instance of a class. 
An instance member of a class can be an instance variable or an instance 
method. Instance members are declared in the members section of the 
class definition: 

• Osp. Class. define ("My. Cool. Class", 

• { 

• members: 

{ 

• foo: VALUE, 

• bar: function() { } 

} 

• }); 

The instance members can be accessed by using an actual instance of 
a class: 

• var myClassl = new My. Cool. Class; 

• myClassl. foo = 3.141; 

• myClassl. bar (); 

Data and access types 

The web framework supports two data types, which provide fundamentally 
different behaviours: 

Primitive types include Boolean, Number, String, null, and undefined. 
If a primitive type is assigned to an instance variable in the class decla- 
ration, the variable behaves as if each instance has a copy of that value. 
Primitive types are never shared among instances. 

Reference types include Array, Function, RegExp, and the generic Object. 
Reference types point to a corresponding data value that represents a 
more complex data structure than the primitive type. If such a reference 
type is assigned to an instance variable in the class declaration, the 
variable behaves as if each instance is pointed to the same complex data 
structure. All instances share the same value, unless the corresponding 
instance variable is assigned a different value. As all reference data types 
are shared by default, be careful when using them in the class declaration. 
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For example, if an instance variable is assigned to an array in the class 
declaration, any instance of the class can (knowingly or unknowingly) 
manipulate this array, and cause changes that affect the other class instances. 
Such a manipulation can push a new item into the array or change the value 
of a specific array item. 

You can declare a variable with a reference data type in the class defini- 
tion: 

members 

• { 

foo: [1, 2, 4] // All instances share this reference 

type data structure 
• } 

To prevent the other instances from sharing the same data, initialize 
the actual value of the variable in the class constructor, not in the mem- 
bers section: 

• construct: function() 

• { 

this. foo = [1, 2 , 4]; // Each instance has with its own 
data structure 
• }; 

• members 

• { 

foo: null // Value to be initialized in the con- 
structor 
• } 


In object-oriented programming, a concept of “access” or “visibility” 
of the members (or even classes) exists. The Web framework supports 3 
access types: 

public 

To be accessed from any class or instance. Member name cannot start with 
an underscore. 

protected 

To be accessed only from derived classes or their instances. Member name 
starts with a single underscore. 

private 

To be accessed only from the defining class or instance. Member name starts 
with a double underscore. 
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Inheritance 

Inheritance is used to derive the current class from another base class. 
Derive the current class from a base class using the extend key: 

• Osp. Class, define ("My. Great .Superclass", 

• { 

• // This is the base class 

• }); 

• Osp. Class. define ("My. Cool. Class", 

• { 

• extend: My. Great. Superclass 

• }); 

Single and multi-level inheritance is supported. You can derive a class 
from a base class which in turn has been derived from another base class: 

• Osp. Class, define ("Osp. Test .Cat", 

• { 

• extend: Osp. Test .Animal 

• }); 

• Osp. Class, define ("Osp. Test .Kitten", 

• { 

• extend: Osp. Test. Cat 

• }); 

Multiple inheritance (deriving a class from multiple base classes) is not 
supported in the web applications. 

Mixins 

Mixins are collections of code and variables in a generic form that can be 
merged (“mixed”) into other classes. They are similar to classes, but cannot 
be instantiated. Use mixins to share functionalities without using inherit- 
ance, and to extend or patch the functionalities of existing classes. 

Typically, mixins are made up of only a few members that allow generic 
implementation of some very specific functionality. The code in the mixin 
must be generic, since it is mixed into different existing classes. Mixins usu- 
ally cover only a single functionality aspect, and therefore tend to be small. 

Declaring mixins 

Mixins are declared using the Mixin keyword with an uppercase ‘M’: 

• Osp. Mixin. define (name, config) 

A mixin declaration contains properties, constructor, destructor, and 
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members. Similarly as classes, mixins use a closed form of the mixin dec- 
laration where the entire declaration is provided within the define (name, 
config) method. In the method, name is a fully- cjualified mixin name, 
and config is a configuration map with various sections defined by keys: 

• Osp. Mixin. define ("name", 

• { 

• include: [SuperMixins] , 

• members: 

{ 

• propl: "foo", 

• methl: function() { }, 

• meth2: function() { } 

} 

• }); 

bada user interface 

The normal setup for a simple bada web application UI is a full-screen Osp . 
Ui .Controls . Form container within an Osp .Ui .Control s . Frame container 
that creates the top-level window. The form in turn contains the indicator 
bar, header, footer, and UI controls. 

There can only be one frame per application. However, there can be 
multiple forms, though only one form can be active at a time. 

The Ui namespace provides a meta-model for UX development. You must 
adhere to the model in order to use the functionalities of the Ui namespace. 

UI controls 

UI controls are user interface elements, such as buttons, lists, and text 
fields, that are commonly used for organizing content on the device 
screen, providing means for user navigation or notifying about applica- 
tion status changes. 

The Osp .Ui .Control class is the abstract base class of all user interface 
elements. It encapsulates the native display functions for the underlying 
windowing system, and provides the infrastructure necessary for the ele- 
ments to respond to user inputs. It also determines how the key events are 
dispatched and processed. 

Additionally, the Control class defines the following properties that are 
shared by all controls and allow for a higher degree of control handling: 
Position and size 
Drawing logic 
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BUTTOH 


UIELS 


FOOTE H 



FlUlHE 


FO-ltM 


PANEL 


bada Web 

application 

Ul 


Events 

• Key 

• Focus 



Meta-model of an application 
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• Touch 

• Drag and drop 

You must define listeners for controls to handle events. 

Layout 

The bada platform allows you to attach an Osp.Ui.Layout instance to a con- 
tainer. The position of a child control in the application UI is relative to the 
top-left corner of the parent container. However, attaching a layout to a 
parent container affects the size and position of all the child controls added 
to the parent container. 

Layouts help you to 
organise controls inside a 
container in a sophisticated 
manner. Layouts are useful 
in handling multiple screen 
resolutions within the same 
application. They also help 
in positioning the controls 
without using absolute coordi- 
nates. With these features, you 
can design screens that look 
good in any device irrespec- 
tive of the screen size or reso- 
lution. The Osp.Ui .Controls . 

Form class is a special con- 
tainer to which a separate 
layout can be added for the 
portrait and landscape mode. 

The figure illustrates a 
screen designed using dif- 
ferent layouts. The red lines 
indicate the vertical box layout components. Each component of the ver- 
tical box layout consists of a grid layout (indicated by blue lines) which 
in turn has other controls in it. The green lines indicate horizontal box 
layout components. 

Associating layouts with a container 

Layouts can be associated with any container, though one layout instance 



Using multiple layouts 





70 


WEB PROGRAMMING FOR BADA 


can associate with only one container instance. A container, however, can 
have at most two layout instances associated with it, one for each orientation 
mode: portrait and landscape. 

For applying any layout to a container, an instance of the layout is first 
created. This layout instance is then passed as a value to the layout’ key in 
the container constructor, thus associating it with the container. 

• var relativeLayout = new Osp.Ui.RelativeLayout () ; 

• var panel = new Osp.Ui. Controls. Panel 

• ({ 

• bounds: {x: 20, y: 40, width: 40, height: 50}, 

• groupStyle: "single", layout: relativeLayout 

• }); 

When a layout is associated with a container, the settings of a control 
that is present inside the container change according to the rules specified 
for the layout. No explicit method call is required to apply the layout. The 
application of the layout rules is done implicitly as soon as the layout is 
associated with the container. 

HelloWorld tutorial 

Let’s look at creating a simple HelloWorld application. Read this chapter 
to help familiarise yourself with the bada web application development 
process as well as with using the bada SDK by creating a simple HelloWorld 
application that contains the basic bada web application functionality and 
displays a form on the device screen. 

To create a HelloWorld application 

1. Creating the application profile 

Define your application details on the bada developer site and download 
the manifest file. To get familiar with the IDE and SDK, you can create the 
HelloWorld application without registering it on the bada developer site. 
When creating an application without registration, use the default manifest 
file provided in the SDK. 

2. Creating the HelloWorld Project 

a. Launch the IDE by selecting Start > Programs > bada SDK > 
badalDE. 

b. Create the application project in the IDE. 

During the project creation, define HelloWorld as the name of your 
project, and select the downloaded manifest file (if you downloaded one 
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in the previous step). For all other values, use the default values in the 
application wizard. 

The new Hello World project is shown in the Project Explorer view of the 
IDE, with default content in the ap p 1 i c a t i o n . x m 1 and HelloWorld.js files 
as well as in several project folders. The selected mani fest . xml file is also 
included in the project. 

3. Creating the Application Code 

a. Your Hello Wo rid project uses the bada web Application template. 
As such, your project’s source files already contain some of the basic 
application functionality. 

The automatically-included code creates an application with a button 
which, when clicked, displays a message box with the title HelloWorld 
: Message. To change the title to “HelloWorld”, take the following steps 
(illustrated in the following screenshot): 

b. Open the Helloworld.js file in the IDE JavaScript Editor. 

c. Change the title to HelloWorld. 

4. Save the file. 

Basic web app 

This chapter, based on the BasicWebApp sample delivered with the bada 
SDK in \<BADA_SDK_HOME>\Samples\BasicWebApp, demonstrates how 



HelloWorld project 
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you can use the Osp.Ui namespace to implement the basic UI functionali- 
ties in the bada web application. 

To initialise the application 

1. BasicApp.js source file 

a. The define () method of the Osp. Core .Class class is used to create 
the main class of the application (Ba.BasicApp) with a specific con- 
figuration. The following configuration parameters are set for the 
application: 

• The extend key is used to inherit the Osp. Core. Object class. 

• The include key is used to add the BasicAppAllPanels mixin 
to the application. The BasicAppAllPanels mixin is defined in 
the BasicAppAllPanels.js source file to merge or mix its code logic 
and variables with the BasicApp.js file. 

• The construct key represents the class constructor which, in this 
case, retrieves the instance of the Osp.Ui .Controls . Frame class. 

• The members key is used to declare and define the required con- 
stant members, which define the panel, button, and image label 
dimension constants in the application, as well as the location of 
the image used on the Image panel and the action IDs for reacting 
to footer item clicks. 

• Osp. Core. Class. define ("Ba.BasicApp", 

• { 

• extend: Osp. Core. Object, 

• include: [BasicAppAllPanels], 

construct: function (frameObj ) 

{ 

this. frameObj = Osp. Ui. Controls .Frame. getlnstance () ; 

b 

• members: 

{ 

• CONST: 

{ 

• ID _ IMAGE _ PATH: '. ./Res/BasicWebApp/image/', 

• PANEL _ WIDTH: 480, 

• PANEL _ HEIGHT: 630, 

• BUTTON X: 10, 
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BUTTON _Y: 180, 

BUTTON _ WIDTH: 450, 

BUTTON _ HEIGHT: 60, 

IMAGE _ LABEL _ WIDTH: 450, 

IMAGE _ LABEL _ HEIGHT: 200, 

ACT ION ID _ FOOTER: 

{ 

BUTTON _ PANEL: 1, 

ORIENTATION _ PANEL: 2, 

IMAGE _ PANEL: 3, 

PRIVILEGE _ PANEL: 4, 

}, 

}, 

The launch() method launches the application, creates the 
form, and initializes all the panels, 
launch: function() 

{ 

this.createForm(); 

this .Initial izeAUPanels () ; 


• // Member methods are defined here 

} 

• Ov- 

ereating a Form 

The form creation functionality is implemented in the BasicApp.js file. 

1. Creating the Form 

The cr eateForm ( ) method is used to create an Osp . Ui .Controls . Form class 
instance. During the creation, the indicator area, header, and footer are also 
automatically created for the form by setting them as form styles. 

• createForm: function() 

• { 

• this .basicForm = new Osp. Ui. Controls. Form 

({ 

• style:Osp.Ui. Controls. FormStyle. INDICATOR | 

• Osp. Ui. Controls. FormStyle. FOOTER | 

• Osp. Ui. Controls .FormStyle. HEADER 
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}); 

The addControlO method of the Frame class is used to add the created 
form to the application frame. The form is set as the current form using 

the setCurrentForm () method. 

Osp.Ui. Controls. Frame, get In stance () . addControl (this . 
basicForm) ; 

• this .frameObj . setCurrentForm (this .basicForm) ; 

• this .createHeader (); 

• this .createFooterButtons () ; 

• }, 

2. Setting the Footer Content 

The getCurrentForm ( ) and getFooter ( ) methods are used to retrieve the 
current form and the Osp.Ui. Controls. Footer instance. The tab footer 
style is set for displaying the footer items that allow the user to access the 
four panels. 

• createFooterButtons: function() 

• { 

vCurrForm = (Osp. Ui. Controls. Frame. getlnstance () .getCur- 
rentForm() ) ; 

• footer = vCurrForm. getFooter (); 


footer. setFooterStyle (Osp. Ui. Controls .FooterStyle. TAB) ; 

An action ID and name is set for each of the four tab footer items created 
using the entries from an array. The name determines the text shown on the 
tab on the screen, and the action ID is later used to identify the individual 
items in the onActionPer formed ( ) event handler, which defines the action 
events that can be triggered for the items. 

The setltemSelected () method sets the first tab as selected, 
which means that the Button panel is the first screen to be displayed. 
The addltem() method is used to add all the footer items to the footer. 
Finally, an event listener is added to the footer for responding to action events. 

aForm = new Array ("Button", "Orientation", "Image", 
"Privilege") ; 

• for(var i = 0; i < aForm. length; i++) 

{ 

• footerltem = 

{ 

• actionld: i+1, 
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• text: aForm[i], 

}; 

• footer. setltemSelected(O) ; 

• footer. addltem(footerltem) ; 

} 

footer. addListener ( 'actionPerform', this .onActionPer- 
formed, this); 

• }, 

• 3. Setting the Header Content 

• The getHeader() method of the Form class is used to get 
the Osp.Ui. Controls. Header class instance. The setTitle- 
Text() method sets a title to be displayed in the header. 

• createHeader: function () 

• { 

this .basicForm. get Header () . setTitleText ("Basic WebApp") ; 

• }, 


Respond to Action Events 

1. Basic App.js Source File 

Based on the action IDs, the onActionPer formed ( ) event handler triggers 
a set of actions. For each footer tab, it sets the footer tab as selected, the 
applicable panel as visible, and the other panels as invisible. It also sets the 
orientation of the form, and defines other panel- specific settings, as needed. 

• onActionPerformed: function(e) 

• { 

switch (e.getData() .actionld) 

{ 

case this. CONST. ACTIONID _ FOOTER. BUTTON _ PANEL: 

• this .privilegePanel. setVisible (false) ; 

• this . imagePanel. setVisible (false) ; 

• this .or lent at ionPanel. setVisible (false) ; 

• this .but tonPanel. setVisible (true) ; 

• this .basicForm. setOr lent at ion (Osp.Ui. Or lent at ion. 
PORTRAIT); 

• Osp. Ui. Controls. Frame. getlnstance () .getCurrent- 
FormQ . get Footer () . setltemSelected(O) ; 

• break; 

• // Other cases are defined here 

} 
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• } 

• Panels 

Initialise the application 

The orientation modes for the panels are set globally to portrait and land 
scape, since no other modes are supported. 


The define () method of the Osp. 
Core .Mixin class is used to define 
the BasicAppAllPanels mixin 
with a specific configuration. 
The members key is used to declare 
the action IDs for panel buttons, the 
orientation index, and the label and 
button text size. 

• orientationModes = ["por- 
trait", "landscape"]; 

• Osp. Core. Mixin. 
define ("BasicAppAllPanels", 

• { 

• members: 

{ 

• ACTION _ ID: 

{ 

• BUTTON _ PANEL: 1, 

• ORIENTATION _ PANEL: 

• PRIVILEGE _ TEST _ 1: 

• PRIVILEGE _ TEST _ 2 : 

}, 

orientationModelndex: 
LABEL _ TEXTSIZE: 25, 
BUTTON _ TEXTSIZE: 25, 

// Member methods are 

} 

• }); 
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Create the Button panel 

The Button screen demonstrates the use of the Osp .Ui .Controls . 
Button and Osp. Ui. Controls .Label controls. 

The createBodyButtonPanelO method is used to create the button- 
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Panel panel and its content. An instance of the Osp .Ui .Relat iveLayout class 
is created. The Relative Layout class allows UI controls to be aligned with 
respect to each other. 

• createBodyButtonPanel: function() 

• { 

• this .relativeLayoutButtonPanel = new Osp. 
Ui.RelativeLayout () ; 

An Osp. Ui. Controls. Panel instance is created by specifying the 
boundaries of the panel, and the common panel layout for both portrait 
and landscape orientation modes. The setBackgroundColor () method 
sets the background color of the panel to black. 

• this .buttonPanel = new Osp. Ui. Controls. Panel 

({ 

• bounds: 

{ 

• x: 0, 

• y: 0, 

• width: this. basicForm. getClientAreaBounds () .width 

• height: this .basicForm. getClientAreaBounds () . 

height 

}, 

• layout: this .relativeLayoutButtonPanel 

}); 

• this. buttonPanel. setBackgroundColor ("black") ; 

An instance of the Button class is created by specifying the size of the 
button, the button text, and an action ID for the button. 

A Label instance is created by setting its bounds, width, height, and text. 
The text color and size of the label is set using the setTextColor () and set- 
TextSize () methods, respectively. 

• this .labelButton = new Osp. Ui. Controls. Button 

({ 

• bounds: 

{ 

• x: this. CONST. BUTTON _ X, 

• y: this .CONST. BUTTON _ Y, 

• width: this. CONST. BUTTON _ WIDTH, 

• height: this. CONST. BUTTON HEIGHT 
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}, 

• text: "Change label text", 

• actionld: this. ACTION _ ID. BUTTON _ PANEL 

}); 

this . labelButton . setTextSize (this .BUTTON _ TEXTSIZE) ; 

• this .demoLabel = new Osp.Ui. Controls. Label 

({ 

bounds: {x: 30, y: 80, width: 250, height: 100}, 
text : "Button" 

}); 

• this .demoLabel. setTextColor ( 'white' ) ; 

this .demoLabel. setTextSize (this .LABEL _ TEXTSIZE); 

The addControl() method is used to add the label and button to 
the panel and the panel to the form. The addListener () method adds 
an event listener for the button, so that the application can react to the 
button presses. 

The setCenterAlignedO and setRelation () methods are used to 
define how the button and label are placed on the screen in the relative 
layout. The button is set to be both horizontally and vertically centered 
on the panel, while the bottom of the label is set to be aligned with the 
top of the button. 

• this .butt onPanel. addControl (this. demoLabel) ; 

• this .butt onPanel. addControl (this. labelButton) ; 

• 

• this . labelButton. addListener ( 'actionPerform', 

• this .actionPerformedBut- 
tonPanel, this); 

• this .basicForm. addControl (this .buttonPanel) ; 

this .relativeLayoutButtonPanel. setCenterAligned(this . 
labelButton, 

• Osp. 

Ui. Controls. Horizontal Alignment .CENTER) ; 

this .relativeLayoutButtonPanel. setCenter Aligned (this . 
labelButton, 

• Osp. 

Ui. Controls .Vert leal Alignment .MIDDLE) ; 

• 
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this .relativeLayoutButtonPanel. setRelat ion (this .demo- 
Label, this.labelButton, 

• Osp. 
Ui.RectangleEdgeRelation.RECT _ EDGE _ RELATION _ BOTTOM _ TO _ 
TOP) ; 

• }, 

Create the orientation panel 

The Orientation screen demonstrates the orientation-related features in 
bada web applications. 

The createBodyPanelOrientation ( ) method is used to create the ori- 
entationPanel panel and its content. Similarly to thebuttonPanel panel, 
this panel contains a relative layout and a button. 

• createBodyPanelOrientation: function () 

• { 

• // UI elements are created here 

• An event listener is set for the form to listen to 

changes in the device orientation. 

this .basicForm.addListener ( 'orient at ionChange', 
function (e) 

{ 

• this.changeOrientation(); 

• }, 

• this); 

• }, 


When the changeOrientation() method is called, it is a trigger to 
change the orientation from portrait to landscape or vice versa. 

The setBoundsO method sets the current boundaries of the orienta- 
tionPanel instance. The getOrientationStatus () method is used to get 
the current orientation of the form. 

• changeOrientation: function() 

• { 

• this .orient at ionPanel. setBounds 

({ 

• x: 0, 

• y: 0, 

width: this.basicForm.getClientAreaBounds () .width, 
height: this.basicForm.getClientAreaBounds () .height 

}); 
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cOrientation = this .basicForm.getOrientationStatus () ; 

If the orientation is set to landscape, the orientation button bounds are 
changed. The horizontal and vertical alignment of the button is set relative 
to the layout of the panel using the setCenterAlignedO method. This 
method allows recalibrating the position of the button in landscape mode. 
The change from landscape to portrait mode is handled similarly, 
if (cOrientation == 'landscape') 

{ 

• // Set the button bounds 

• this .relat iveLayoutOr lent at ionPanel. 
setCenter Aligned (this .or lent at ionButt on, 

• 

Osp.Ui.LayoutHorizontalAlignment .LAYOUT _ HORIZONTAL _ 

ALIGN _ CENTER); 

• 

• this. relat iveLayoutOr lent at ionPanel. 
setCenter Aligned (this .or lent at ionButt on , 

• 

Osp.Ui.LayoutVertical Alignment .LAYOUT _ VERTICAL _ ALIGN 
MIDDLE); 

} 

• else 
{ 

// Handle the button when changing to portrait mode 

} 

• }, 

Create the image panel 

The Image screen demonstrates the use of images in bada web applications. 

Similarly to the buttonPanel panel, the imagePanel panel contains a 
relative layout and a label. However, in this panel the label contains a back- 
ground image, which is set using the setBackgroundlmage () method. This 
method takes as an input parameter the image location path. 

• createBodylmagePanel: function() 

• { 

• // Layout and panel are created here 


this .demoLabellmagePanel = new Osp.Ui. Controls .Label 
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({ 

bounds: {x: 0, y: 0, width: 0, height: 0}, text: "" 

}); 

this .demoLabel Image Panel. setBackgroundlmage (this .CONST. 
ID _ IMAGE _ PATH + "bada. png"); 

• The width and height of the label containing the back- 
ground image is set using the setWidth() and setHeightO me 
thods, respectively. 

this .relativeLayout ImagePanelPor trait . setWidth (this . 
demoLabel ImagePanel, 

• this. 
CONST. IMAGE _ LABEL _ WIDTH); 

this .relativeLayout ImagePanelPor trait . set Height (this. 
demoLabel ImagePanel, 

• this. 
CONST. IMAGE _ LABEL _ HEIGHT); 

// Set the panel alignment and add orientation change 
listener 

• }, 


Create the Privilege Panel 

The Privilege screen demonstrates the use of system privileges in bada 
web applications. It attempts to use methods that require certain privilege 
groups, and tests whether the application has the required privileges. 

The screen contains a panel and two labels and buttons, created similarly 
as for the other screens. 

The two methods that require privileges are the getProperty- 
Value ( ) method of the Device Status WAC module and the get- 
TaskLists () method of the Task WAC module, called by the test- 
Buttonl and testButton2 button presses, respectively. 

Only the getPropertyValue () method (used to retrieve the current 
battery level) is successful, since its required privilege has been set in 
the manifest file. 

• actionPerformedPrivilegePanel: function(e) 

• { 

switch(e.getData() .actionld) 

{ 

• case this. ACTION _ ID. PRIVILEGE _ TEST _ 1: 

• this .demoLabe!3. setText ("Success") ; 


it 
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• deviceapis .devicestatus .getPropertyValue (onValueR 
etrievedBattery, 

• functi 
on(e) {}, 

{ 

• property: "batteryLevel", aspect: "Battery" 

}); 

• break; 

• case this. ACTION _ ID. PRIVILEGE _ TEST _ 2: 

• this.demoLabel4 . setText ("Denied") ; 

• deviceapis .pim. task. 
getTaskLists (function() {}, function () 

{}); 

• break; 

} 

• }, □ V- : ''-R ■ Ah ;r 


For detailed 

technical 
information, visit 

developer.bada.com 
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OPENGL ES 2.0 
ONBADA 

bada has added support for OpenGL 
graphics support with version 2.0 

T his chapter, based on the GlesCube sample delivered with the 
bada SDK in \<BADA_SDK_HOME>\Samples\GlesCube, dem- 
onstrates how you can use the Osp::Graphics::Opengl sub-name- 
space to create a 3D cube using OpenGL® ES 2.0 and EGL™. 
This sample is a fully functional application for extending the func- 
tionality of OpenGL® ES 2.0 on the bada platform to create a spinning 
3D cube. OpenGL® is a standard specification defining a cross-language, 
cross-platform API for writing applications that produce 2D and 3D com- 
puter graphics. OpenGL® ES 2.0 enables 3D graphics design with shading 
capabilities. EGL™ acts as an interface between OpenGL® and bada. 

The application includes the Form (_pForm) UI control, and no interac- 
tive UI elements. When the application starts, a spinning 3D cube is drawn 
on the form. 

The GlesCube sample application uses the bada Form Based Appli- 
cation template, which contains a preset Osp::Ui::Controls::Form class. 
Most methods used in the sample remain as they were created in the 
project template. 

tflfflkdi9itrao: 
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GlesCubeform 


This application requires two libraries - FGraphicsEgl and FGraphic- 
sOpengl - for using the required functions of OpenGL® and EGL™. These 
libraries can be added from Project > Properties > C/C++ Build 
> Settings > Tool Settings > bada C++ Linker in the bada IDE. 

Initialise the application 

1. GlesCube.h Header File 

a. The GlesCube.h header file includes the FGraphicsOpengl2.h file to 
use the definitions and functions of OpenGL® ES 2.0 in the application. 
A 2D array is declared within a structure for ease of use and for reuse 
in the application. 

• #include <FBase.h> 

• #include <FSystem.h> 

• #include <FGraphics.h> 

• #include <FUi.h> 

• #include <FApp.h> 

• #include <FGraphicsOpengl2.h> 

• struct Matrix 

• { 

• Osp: :Graphics: :Opengl: :GLfloat m [4 ] [4 ] ; 

• }; 


b. The Osp: :System: : IScreenEventListener interface is declared 
in this application for saving battery life by allowing the device to 
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enter the sleep mode and by releasing resources. This occurs in the 
event of turning off the device screen. This listener ensures the proper 
functioning of the device when resource-heavy applications with 3D 
graphics are being executed. 

TheOsp: :Base: :Runtime: :ITimerEventListener interface is declared 
for listening to timer events. The spinning event of the 3D cube in this 
application occurs every time the timer expires. 

• class GlesCube: 

• public Osp: :App: : Application, 

• public Osp: :System: :IScreenEventListener, 

• public Osp: :Ui: :IKeyEventListener, 

• public Osp: :Base: :Runtime: :ITimerEventListener 

• { 

c. Finally, a set of OpenGL® and EGL™-specific variables is declared. 

• private: 

Osp: :Graphics: :Opengl: :EGLDisplay _ _ eglDisplay; 

Osp: :Graphics: :Opengl: :EGLSurface _ _ eglSurface; 

Osp: :Graphics: :Opengl: :EGLConfig _ _ eglConfig; 

Osp: :Graphics: :Opengl: :EGLContext _ _ eglContext; 

Osp: :Graphics: :Opengl: :GLuint _ _ programObject; 

• Osp: :Graphics: :Opengl: :GLint _ _ idxPosition; 

• Osp: :Graphics: :Opengl: :GLint _ _ idxColor; 

• Osp: :Graphics: :Opengl: :GLint _ _ idxMVP; 

• Osp: :Graphics: :Opengl: :GLfloat _ _ angle; 

• Osp: :Base: :Runtime: :Timer* _ _ pTimer; 

• Matrix _ _ matMVP; 

• Osp: :Ui: :Controls : :Form* _ _ pForm; 

• }; 

2. GlesCube.cpp Source File 

a. OpenGL® ES 2.0 or later uses the shader model. A shader is a set of 
GPU (Graphics Processing Unit) instructions that is executed on 
the graphics hardware to enhance the final result on the screen. A 
fragment shader is used to create per-pixel effects on the cube, and 
a vertex shader is used to create a special effect each time a vertex of 
the cube is processed. 

The fragment. h and vertex.h files are included in the GlesCube.cpp file 
to add defined shaders for the 3D cube. Both files contain an array of 
shader information. 
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• #include "GlesCube.h" 

• #include "fragment. h" 

• #include "vertex. h" 

• #include <math.h> 

a. Various arrays are also defined within the GlesCube.cpp file: 

i. In a vertices array, each group of 3 values defines 1 of the 8 vertices 
of the cube. The values for the 8 vertices of the cube have been 
defined 3 times to reduce the number of times the array is called 
in the application. 

ii. A colors array defines a color for each vertex defined in 
the vertices array. 

iii. An indices array defines the links between all the available ver- 
tices defined in the vertices array. This array helps in reducing 
redundancy in defining the number of vertices of the cube. 

To Initialize EGL™ 

1. GlesCube.cpp Source File 

a. The eglConfigList [] list is used to define the EGL™ configuration 
requirements for the application. In this case, the required configura- 
tion consists of the following: 

• 16-bit RGB565 format color scheme 

• Window as a selected screen 

• Support for OpenGL® ES 2.0 

The EGL_NONE value indicates the end of the configuration list. It must 
always be the last element of the list. 

• bool GlesCube: :InitEGL() 

• { 

• EGLint numConfigs = 1; 

• EGLint eglConfigList [] = 

{ 

• EGL _ RED _ SIZE, 5, 

• EGL _ GREEN _ SIZE, 6, 

• EGL _ BLUE _ SIZE, 5, 

• EGL _ ALPHA _ SIZE, 0, 

• EGL _ DEPTH _ SIZE, 8, 

• EGL _ SURFACE _ TYPE, EGL _ WINDOW _ BIT, 

EGL _ RENDERABLE _ TYPE, EGL _ OPENGL _ ES2 _ BIT, 

• EGL _ NONE 

}; 
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b. The eglContextList[] list defines the rendering context version of 
OpenGL® ES being used in the application. The rendering context 
version helps to indentify the resources required for OpenGL® ES to 
perform rendering operations. It is where all of the other pieces of the 
graphics library come together to actually display bits of information. 

• EGLint eglContextList [] = 

{ 

• EGL _ CONTEXT _ CLIENT _ VERSION, 2, 

• EGL _ NONE 
}; 


c. In the InitEGLO method, the eglBindAPIO method globally sets 
the current rendering API to OpenGL® ES. 

• eglBindAPI (EGL _ OPENGL _ ES _ API); 

d. To set the EGL™ display for showing the graphic on the screen, two 
methods are used: EGL_DEFAULT_DISPLAY in the eglGetDis- 
play () method sets the EGL™ display to draw the graphics on an 
LCD display, while the egllnitializeO method is used to initialise 
the selected display. 

_ eglDisplay = eglGetDisplay ( (EGLNativeDisplayType) 

EGL DEFAULT DISPLAY); 


if (EGL _ FALSE == egllnitialize ( _ _ eglDisplay, null, 

null) 


|| EGL _ SUCCESS != eglGetError () ) 

{ 

// Error handling 

} 


e. The eglChooseConfigO method enables EGL™ to match all the 
configuration requirements for the application using the given param- 
eters - selected EGL™ display, required configurations, available 
configuration in the buffer, size of the configuration list, and the 
number of configurations that match the requirements, 
if (EGL _ FALSE == eglChooseConfig( _ _ eglDisplay, egl- 
ConfigList, & _ _ eglConfig, 1, 

&numConfigs) || EGL _ SUCCESS != eglGetError () ) 

{ 

• // Error handling 

} 
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f. Once the EGL™ configuration is set, the eglCreateWindowSur- 
face() method creates an on-screen rendering surface over the 
bada screen. 

_ eglSurface = eglCreateWindowSurface ( _ _ eglDisplay, 

_ eglConfig, 

• (EGLNativeWin- 
dowType) _ _ pForm, null); 

g. Finally, the EGL™ rendering context is attached to the EGL™ window 
surface using the eglMakeCurrent() method. The parameters passed 
to the method are the selected EGL™ display, on-screen rendering 
surface, read surface, and EGL™ rendering context to be attached to 
the surface. 

The on-screen rendering surface renders the graphic primitives (building 
blocks of a graphic) and the read surface performs read operations, such as 
reading pixels from a frame buffer. Normally, both these surfaces are the 
same and hence, in the eglMakeCurrent() method, the same parameter is 
passed for both surfaces. 

The existing EGL™ rendering context is flushed from the system if the 
newly chosen rendering context is the same as existing rendering context. 
This flushing operation is performed by the DestroyGL() method. 

if (EGL _ FALSE == eglMakeCurrent ( _ _ eglDisplay, 
eglSurface, _ _ eglSurface, 

• _ _ eglContext) 1 1 EGL _ 
SUCCESS != eglGetError () ) 

{ 

• // Error handling 

• goto CATCH; 

} 

• return true; 

• CATCH: 

• DestroyGLO; 

• return false; 

• } 

Initialize GL 

1. GlesCube.cpp Source File 

a. In the InitGL() method, the shader instances for the fragment and 
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vertex shader are compiled and created by passing the shader type 
as a parameter to theglCreateShader() method. 

A check is performed to confirm whether the required shader binary (GL_ 
NUM_SHADER_BINARY_FORMATS) and shader source (GL_SHADER_ 
COMPILER) is supported. 

• bool GlesCube: :InitGL() 

• { 

• GLint linked = GL _ FALSE; 

// Calculate the color of each fragment passed to the 
fragment shader 

GLuint fragShader = glCreateShader (GL _ FRAGMENT _ 
SHADER); 

// Calculate the vertex properties and values that are 
passed to the vertex shader 

GLuint vertShader = glCreateShader (GL _ VERTEX _ 

SHADER); 

• GLint numFormats = 0; 

glGetIntegerv(GL _ NUM _ SHADER _ BINARY _ FORMATS, &num- 
Formats) ; 

• GLboolean shaderCompiler = GL _ FALSE; 
glGetBooleanv(GL _ SHADER _ COMPILER, &shaderCompiler) ; 

b. The next step is to load the shader objects. There are 2 ways to achieve 
this: 

The first approach is to use the glShaderBinary () method to load the 
shader objects - vertex and fragment - by loading their respective precom- 
piled shader binaries. 

if (0 < numFormats) 

{ 

• GLboolean compiled = GL _ FALSE; 

• GLint* formats = new GLint [numFormats] ; 
glGetIntegerv(GL _ SHADER _ BINARY _ FORMATS, for- 
mats) ; 

for (GLint 1 = 0; 1 < numFormats; i++) 

{ 

• glShaderBinary (1, &fragShader, formats [i] , frag- 
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ment, fragment _ size) ; 

• glShaderBinary (1, &vertShader, formats [i] , 
vertex, vertex size); 

• compiled = GL _ TRUE; 

• break; 

} 

• delete [] formats; 

} 

The second approach to load the shader objects is to use the GLES2 
Shader Compiler to read and compile the shader source code for both the 
fragment and the vertex shader. 

else if(GL_TRUE == shaderCompiler) 

{ 

• // Read and compile the shader source code for 
fragment shader 

• glShaderSource (fragShader, 1 , (const 

char**) &f ragmentText, null); 

• glCompileShader (fragShader) ; 

• GLint bShader Compiled = GL _ FALSE; 

// Determine whether the compilation is successful 
glGetShaderiv (fragShader, GL _ COMPILE _ STATUS, 
&bShaderCompiled) ; 

• 

• // Read and compile the shader source code for 
vertex shader 

• glShaderSource (vertShader, 1, (const 

char**) &vertexText, null); 

• glCompileShader (vertShader) ; 

// Determine whether the compilation is successful 
glGetShaderiv (vertShader, GL _ COMPILE _ STATUS, 
&bShaderCompiled) ; 

} 

c. Once the shader objects have been loaded, a shader program is 
created. The program attaches and links the shader objects to the 
shader program. 

It also provides the means for checking the compatibility of the shaders 
that are used to create a program (for instance, checking the compatibility 
between a vertex shader and a fragment shader). When they are no longer 
needed as part of a program object, the shader instances can be detached. 
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• _ _ programObject = glCreateProgram() ; 
glAttachShader ( _ _ programObject, fragShader); 
glAttachShader ( _ _ programObject, vertShader); 

• glLinkProgram( _ _ programObject) ; 

// Determine if the shader object is linked to the 
program 

glGetProgramiv( _ _ programObject, GL _ LINK _ STATUS, 
&linked) ; 

d. Get the location for each vertex or pixel attribute in the shader pro- 
gram using the glGetAttribLocation() and glGetUniformLo- 
c at ion () methods. If the shader program attributes (a_position, a_ 
color, and ujmvpMatrix) are valid, these methods return an integer 
value that represents the index location of the attributes. For invalid 
attributes, the return value is -1. 

The glGetAttribLocation () method retrieves the location of the 
attributes that have an effect on a vertex or pixel, such as position vector, 
normal vector, or vertex color. The glGetUniformLocation() method 
retrieves the location of the attributes that have an effect on groups 
of vertices or pixels, such as model view matrix, projection matrix, or 
light position. 

• _ _ idxPosition = glGetAttribLocation ( _ _ programOb- 
ject, "a _ position") ; 

_ idxColor = glGetAttribLocation ( _ _ programObject, 

"a _ color") ; 

_ idxMVP = glGetUniformLocation ( _ _ programObject, 

"u _ mvpMatrix"); 

• e. Install the shader program and enable the GPU to 
execute the shader operations in the frame buffer. 

// Install the program object to use the shader pro- 
gram 

• glUseProgram( _ _ programObject) ; 

• f. Finally, the glDeleteShader () method is used to free the 
memory and invalidate the name associated with the frag- 
ment and vertex shader objects. 

• glDeleteShader (vertShader) ; 

• glDeleteShader (fragShader) ; 

• // Clear the color buffers 

• glClearColor (0, 0, 0, 1); 

• glClear (GL COLOR BUFFER BIT); 
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• return true; 

• } 

Draw the GlesCube 

1. GlesCube.cpp Source File 

a. The giviewport () method specifies the affine transformation of 
the x and y values from normalized device coordinates to window 
coordinates as specified by the GetBounds () method. 

Normalized device coordinates are a part of a device-independent coor- 
dinate system which is used to ensure that the application runs smoothly 
on different devices with different aspect ratios. 

Affine transformation is a combination of single transformations, such 
as rotation or reflection on an axis. 

• bool GlesCube: :Draw() 

• { 

• int x, y, width, height; 

• pForm->GetBounds (x, y, width, height); 


• giviewport (0, 0, width, height); 

glClear (GL _ COLOR _ BUFFER _ BIT | GL _ DEPTH _ BUFFER _ 

BIT | GL _ STENCIL _ BUFFER _ BIT) ; 

b. The giver texAttr ibPointer () method is used to define an array 
of generic vertex attribute data. These attributes are parameters (in 
this case, position and color) associated with each vertex of the cube. 
In both instances, the final parameter (vertices and colors) represent 
the previously defined arrays - vertices and colors. 

The glEnableVer texAttribArray ( ) method enables the generic vertex 
attribute data arrays. These enabled attributes can be accessed and used 
to render the scene. 

glVertexAttribPointer ( _ _ idxPosition, 3, GL _ FLOAT, 
GL_ FALSE, 3 * sizeof(GL _ FLOAT) , 

• vertices); 
glVertexAttribPointer ( _ _ idxColor, 4, GL _ FLOAT, GL _ 

FALSE, 4 * sizeof(GL _ FLOAT), 

• colors); 
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• glEnableVertexAttribArray ( _ _ idxPosition) ; 

• glEnableVertexAttribArray ( _ _idxColor); 

c. The glUniformMatrix4fv() method modifies the values of the 
4x4 MVP (Model View/Projection) uniform matrix according to the 
vertices information of the cube. An MVP matrix is created with data 
after each vertex of the cube has passed through 2 transformation 
stages: model view transformation (translation, rotation, and scaling 
of objects) and projection (perspective or orthographic). 
glUniformMatrix4fv( _ _ idxMVP, 1, GL _ FALSE, (GLfloat*) 

&_ _ m atMVP.m[0] [0] ) ; 

d. Once the vertex arrays have been enabled, the actual process of 
rendering graphics primitives from the array data occurs using 
the glDrawElementsO method. The final parameter in this method 
is the indices array. 

glDrawElements (GL _ TRIANGLES, numlndices, GL _ 

UNSIGNED _ SHORT, indices) ; 

e. The glFinish() method does not return until the effects of all previ- 
ously called GL commands are complete. When the execution of all 
commands is complete, the method returns a value to signify the end 
of execution. 

The eglSwapBuffersO method is used to post the EGL™ rendering context 
surface on the native window surface. It implicitly calls the glFlush() method 
which empties all the buffers causing all issued commands to be executed 
as quickly as they are accepted by the rendering engine. 

• glFinishO; 

eglSwapBuffers ( _ _ eglDisplay, _ _ eglSurface) ; 

• return true; 

• } 

f. The event of spinning the 3D cube is performed using the user-defined 
methods which perform calculations to move the 3D cube every time 
the timer expires. 

Release OpenGL® ES Resources 

Once the OpenGL® ES methods have been used for the required purposes, it 
is necessary to release all the resources. This release of resources, achieved 
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by the DestroyGL() method, dramatically improves the overall performance 
of the application. 

1. The glDeleteProgramO method frees memory space and invalidates the 
name associated with the program object created in the InitGL() method, 
void GlesCube::DestroyGL() 

• { 

if(_ _ programObject) 

{ 

• glDeleteProgram( _ _ programObject) ; 

} 

2. The eglMakeCurrent() method is cleared to flush the existing EGL™ ren- 
dering context in the event that the new rendering context is the same as 
the existing rendering context. This helps in avoiding context duplication. 

if(_ _ eglDisplay) 

{ 

eglMakeCurrent ( _ _ eglDisplay, null, null, null); 

if ( _ eglContext) 

{ 

• eglDestroyContext ( _ _ eglDisplay, _ _ eglCon- 
text) ; 

• eglContext = EGL _ NO _ CONTEXT; 

} 

if ( _ eglSurface) 

{ 

• eglDestroySurface ( _ _ eglDisplay, _ _ eglSur- 
face) ; 

• eglSurface = EGL _ NO _ SURFACE; 

} 

• eglTerminate ( _ _ eglDisplay) ; 

• eglDisplay = EGL _ NO _ DISPLAY; 

il 

For detailed L 

• return; technical 

} q information, visit 

developer.bada.com 
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